Angular6：将数据从 navheader 传递到路由组件

Question

我是 Angular 的新手，我遇到了一个问题，我的 post 过滤器和 post 排序顺序是导航标题的一部分。它们仅在当前路线为归属路线时出现。我正在尝试弄清楚如何将 de post 过滤器的值（很快就可以观察到，尚未实现为可观察）和排序顺序传递给我的仪表板组件，其中包含 post 组件。

导航标题HTML

  <div *ngIf="this.router.url==='/'">
    <div style="padding-left: 5%">
      <button mat-button [matMenuTriggerFor]="menu">Sort by...</button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item>Popularity</button>
        <button mat-menu-item>Date</button>
      </mat-menu>
    </div>
      <mat-card>
        <mat-form-field>
          <input matInput placeholder="Filter by title" type="text" #filter />
        </mat-form-field>
        <button (click)="applyFilter(filter.value)" mat-raised-button>
          Filter
        </button>
      </mat-card>
  </div>
    <ul>
      <li>
        <a routerLink="/">
          <span class="label">Dashboard</span>
        </a>
      </li>
    </ul>
<main>
  <router-outlet></router-outlet>
</main>

Navheader TS

export class NavheaderComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }
}

过滤器的值应该在哪里结束

export class DashboardComponent {
-->>@Input() public filterPostTitle: string; <<--

  constructor(private _postDataService: PostDataService) {}

  get posts(): Post[] {
    return this._postDataService.posts;
  }

  addNewPost(post) {
    this._postDataService.addNewPost(post);
  }
}

路线

const routes: Routes = [
  {path: '', component: DashboardComponent},
  {path: 'about', component: AboutComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutes {}

过滤器是可观察的很重要，所以我认为将它作为路由值传递是行不通的。

Answer 1

为什么不将过滤器放在仪表板组件中？似乎您在导航组件（应该只处理导航问题）和仪表板组件（应该处理可视化、过滤等）之间混淆了问题

Angular6：将数据从 navheader 传递到路由组件

Angular6: Pass data from navheader to routed component

routing

angular6