angular - 在当前路由提供的 Layout 组件中具有功能的自定义模板

Question

我有一个 Angular 布局，它被多个路由使用。我想知道是否有可能在其中有一个区域由当前路线控制。例如一些具有特定点击逻辑的按钮。

布局:

<div fxLayout="row" fxLayoutAlign="space-between center">
  <div>
    <span class="titleBig">Title</span>
  </div>
  <div>
    /* Here should be the custom template from the current route */
  </div>  
</div>  
<router-outlet></router-outlet>

路线一:

<button type='button' mat-button (click)="doMath()">Do Math</button>

路线二:

<button type='button' mat-button (click)="doPlayOutside()">Do Play</button>

Answer 1

您有两个选择，添加一个按钮，然后修改按钮，使其根据路由执行。

html

<button type='button' mat-button (click)="multiPurproseButton()">Do Math</button>

是

multiPurproseButton() {
  // write some logic to get the path from the url, I am keeping it simple!
  const path = this.router.url.split('/').pop();
  switch(path) {
    case 'home':
       this.doMath();
    case 'about':
       this.doPlayOutside();
  }
}

第二个选项是使用 ngSwitch这将根据您所在的路线呈现多个 html。

html

<div [ngSwitch]="currentPath">
  <div *ngSwitchCase="'home'">
    <h2>Map View Content</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est minima ipsa ex modi laudantium aliquam dolor expedita, numquam officiis omnis.</p>
  </div>
  <div *ngSwitchCase="'about'">
    <h2>List View Content</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium officiis totam debitis? Repellat non a magni mollitia provident, quaerat eum.</p>
  </div>
  <div *ngSwitchDefault>OtherWise</div>
</div>
</div>

是

get currentPath() {
  // write some logic to get the path from the url, I am keeping it simple!
  const path = this.router.url.split('/').pop(); 
  return path;
}