Member 14190529 Ответов: 0

Как использовать излучатели событий с маршрутизацией в angular 7

Здравствуйте, у меня есть кусок кода, который испускает и связывает "пост" abject между тремя компонентами(PostList, App, PostEdit). Теперь я хочу использовать маршрутизацию таким образом, чтобы PostList и PostEdit имели разные навигации. Пожалуйста, помогите мне, как использовать события с помощью <router-outlet> в angular 7.

Вот мое испущенное событие : 

<pre>@Output() emittedPost = new EventEmitter<Post>();
 onFetchPost(id : string){
    const fetchedPost : Post = this.postsService.fetchPost(id)[0];
    console.log("Fetched Post",fetchedPost);
    this.emittedPost.emit(fetchedPost);
  }


Получение должности в app.component.html : 
<pre><app-header></app-header>
<main>
    <!-- <router-outlet></router-outlet> -->
    <app-post-create [receivedPost]="receivedPost"></app-post-create>
    <app-post-list (emittedPost)="onRecivePost($event)"></app-post-list>
</main>


приложение.компонент.ТС:
export class AppComponent {
  receivedPost : Post;
  onRecivePost(post : Post){
      console.log("Received Post in app component",post); 
      this.receivedPost = post;
  } 
}

Привязка в компоненте PostList
@Input() receivedPost: Post;
    ngOnChanges(){
    try{
      if (this.receivedPost !== null){
        this.enteredTitle = this.receivedPost.title;
        this.enteredContent = this.receivedPost.content;
        console.log("Received Post in edit component",this.receivedPost);
      }
    } catch{
      console.log("No Posts");
    }

Когда я нажимаю на кнопку редактировать сообщения, они передаются между компонентами. Но, что мне нужно, так это включить эту "розетку маршрутизатора" в app.component.html так что PostList и PostEdit должны приходить на разные навигации. Поэтому, пожалуйста, посоветуйте мне, как использовать <router-outlet> вместе с event emmitting
Вот мое приложение-routing.module.ts:
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";

import { PostListComponent } from "./posts/posts-list/post-list.component";
import { PostCreateComponent } from "./posts/posts-create/post-create.component";

const routes: Routes = [
  { path: '', component: PostListComponent },
  { path: 'create', component: PostCreateComponent },
  { path: 'edit', component: PostCreateComponent}
];

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


Что я уже пробовал:

Я попробовал сделать 
<router-outlet></router-outlet>
к 
<router-outlet (emittedPost)="onRecivePost($event)"></router-outlet>


Но, похоже, это даже не помогает.

Заранее спасибо

0 Ответов