Question

我是Angular的新手，遇到了一个问题，我的postfilter和post排序顺序是navheader的一部分。它们仅在当前路线是本地路线时显示。我试图弄清楚如何将de postfilter的值（很快可以观察到，尚未实现为可观察到）和排序顺序传递给包含post组件的仪表板组件。

Navheader 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：将数据从导航头传递到路由组件

1 个答案: