Question

我有一个侧边栏和工具栏，它们分别位于我的每个不同页面（主页，大约等）上。我希望顶部工具栏上的文字能够反映您所处的页面，但是我不确定该怎么做。我尝试在routerLink旁边实现ngIf，以检查routerLink是否指向主页，但是它不起作用，我不确定还有其他事情。

    <mat-toolbar >
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span *ngIf = "[routerLink]"="[/']">Home</span>
    </mat-toolbar>
    <ng-content></ng-content>


  </mat-sidenav-content>

Answer 1

您可以在组件中订阅路由器事件，然后比较activeRoute：

activeRoute: string;
constructor(private router: Router) {
    this.router.events.subscribe((event) => {
      if(event instanceof NavigationEnd && event.url) {
        this.activeRoute = event.url;
      }
    });
}

现在在您的html中，您可以进行比较：

<mat-toolbar >
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span *ngIf="activeRoute=='/'">Home</span>
</mat-toolbar>

Answer 2

您可以在路由中提供一些数据：

{
    path: `main`,
    component: MainComponent,
    data: {
      title: 'Main page'
    }
},

在内部组件中，您可以捕获以下数据：

export class MainComponent implements OnInit {
  constructor(
    private route: ActivatedRoute
  ) { }
  ngOnInit() {
    this.route.snapshot.data['title'];
  }
}

之后，您可以将标题保存在service / store / component属性中，并在需要时提供输入参数。

Answer 3

我们可以将标头作为Component，然后将标头文本作为@Input传递给它。

这还有助于实现其他一些好处，例如维护路由历史，动态样式和其他好处。

您可以在这里找到更多详细信息，creating-app-header-component

希望这会有所帮助..：）

基于角形材质页面的动态文本

3 个答案: