Angular6: передача данных из navheader в маршрутизируемый компонент - PullRequest
Новая
       9

Angular6: передача данных из navheader в маршрутизируемый компонент

0 голосов
/ 07 мая 2019

Я довольно плохо знаком с Angular и столкнулся с проблемой, когда мой постфильтр и порядок сортировки постов являются частью navheader. Они появляются, только если текущий маршрут является домашним маршрутом. Я пытаюсь выяснить, как передать значение de postfilter (которое скоро станет заметным, но еще не реализовано как наблюдаемое) и порядок сортировки для компонента панели мониторинга, который содержит посткомпонент.

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 {}

Важно, чтобы фильтр был наблюдаемым, поэтому я думаю, что передавать его как значение маршрута не получится.

1 Ответ

1 голос
/ 07 мая 2019

Почему вы не помещаете свои фильтры в компонент панели мониторинга? Похоже, вы смешиваете проблемы между вашим navcomponent (который должен обрабатывать только вопросы навигации) и компонентом панели мониторинга (который должен обрабатывать визуализацию, фильтрацию и т. Д.)

...