如何在角度7中使用具有路由的事件发射器 [英] How do I use event emitters with routing in angular 7

问题描述

您好，我有一段代码可以在三个组件（PostList，App，PostEdit）之间发出并绑定'Post'。现在我想使用路由，使PostList和PostEdit应该有不同的导航。请帮助我使用< router-outlet>来使用事件。角度为7.



这是我发出的事件：

Hello, I have a piece of code which emits and binds a 'Post' abject between three components(PostList, App, PostEdit). Now I want to use routing such that PostList and PostEdit should have different navigations. Kindly help me how to use events using <router-outlet> in angular 7.

Here is my emitted event :

<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上发帖：

Getting post in 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>

app.component.ts：

app.component.ts:

export class AppComponent {
  receivedPost : Post;
  onRecivePost(post : Post){
      console.log("Received Post in app component",post); 
      this.receivedPost = post;
  } 
}

在PostList组件中绑定

Binding in PostList Component

@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");
    }

当我点击编辑时，组件之间会传递帖子。但是，我需要的是启用< router-outlet>在app.component.html中，以便PostList和PostEdit应该出现在不同的导航中。所以，请建议我如何使用< router-outlet>以及事件发布

这是我的app-routing.module.ts：

When I am clicking on edit posts were being passed among components. But, what I need is to enable that <router-outlet> in app.component.html so that the PostList and PostEdit should come on different navigations. So, kindly suggest me on how to use <router-outlet> along with event emmitting
Here is my app-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 {}

我的尝试：



我尝试制作

What I have tried:

I tried making

<router-outlet></router-outlet>

to

<router-outlet (emittedPost)="onRecivePost($event)"></router-outlet>

但是，这似乎没有帮助。



提前致谢

But, that doesn't even seem to be helping.

Thanks in advance

推荐答案

event） > < / app-post-list >
< / main >

event)"></app-post-list> </main>

app.component.ts：

app.component.ts:

export class AppComponent {
  receivedPost : Post;
  onRecivePost(post : Post){
      console.log("Received Post in app component",post); 
      this.receivedPost = post;
  } 
}

在PostList组件中绑定

Binding in PostList Component

@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");
    }

当我点击编辑时，组件之间会传递帖子。但是，我需要的是启用< router-outlet>在app.component.html中，以便PostList和PostEdit应该出现在不同的导航中。所以，请建议我如何使用< router-outlet>以及事件发布

这是我的app-routing.module.ts：

When I am clicking on edit posts were being passed among components. But, what I need is to enable that <router-outlet> in app.component.html so that the PostList and PostEdit should come on different navigations. So, kindly suggest me on how to use <router-outlet> along with event emmitting
Here is my app-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 {}

我的尝试：



我尝试制作

What I have tried:

I tried making

<router-outlet></router-outlet>

to

<router-outlet (emittedPost)="onRecivePost(

event）>< / router-outlet> ;

event)"></router-outlet>

但是，这似乎没有帮助。



提前致谢

But, that doesn't even seem to be helping.

Thanks in advance

这篇关于如何在角度7中使用具有路由的事件发射器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！