Question

我以某种方式知道Angular can interact中的组件。使用例如@Input装饰者。

但是，我不太了解的是如何根据导航事件更新组件。

特别是我在谈论一个应该改变的标题。例如，在/home中，它应为空，在/group?id=1中，它应显示组名，但也会显示一些按钮等。

由于应用程序确实具有某种布局：

<div class="header-container">
  <app-header>
    <!-- Individual header content goes here -->
  </app-header>
</div>

<div class="content-container" fxLayout="column" fxFlex>
  <app-content fxLayout="column" fxFlex>
  </app-content>
</div>

<div class="footer-container">
</div>

我想知道单独更新<app-header/>的方法是什么？

Answer 1

查看Alex Rickabaugh（Angular Core）所做的presentation如何使用路由组件指定的内容创建SideNav。

完整的实现有点复杂，因为它结合了对therouter事件的监听和创建自定义结构指令，但值得一看。通过代码，您将学到很多东西。

<强> app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <left-nav></left-nav>
  <router-outlet></router-outlet>
  `
})
export class AppComponent  {}

<强> a.component.ts

import {Component} from '@angular/core';

@Component({
  template: `
<h2>I am Route A</h2>

<div *leftNav>
  <h3>Route A Nav</h3>
</div>
`
})
export class RouteA {}

<强> b.component.ts

import {Component} from '@angular/core';

@Component({
  template: `
<h2>I am Route B</h2>

<div *leftNav>
  <h3>Route B Nav</h3>
</div>
`
})
export class RouteB {}

Full implementation

所有的功劳归功于Alex，我只是提出他的解决方案。

如何根据导航事件更新其他组件内容？

1 个答案: