Angular4：如何通过路由器添加的子节点将数据从父节点传递给子节

发布时间：2020-12-17 07:24:10 所属栏目：安全来源：网络整理

导读：继续这个问题 Angular 4^ : How to have more than one child of a component with each child targeting its own router outlet,我能够将一些子组件注入到多个父组件中,现在我想将这些父组件中的数据async传递给child.试过@Input,似乎无法获胜. 儿童 export

继续这个问题 Angular 4^ : How to have more than one child of a component with each child targeting its own router outlet,我能够将一些子组件注入到多个父组件中,现在我想将这些父组件中的数据async传递给child.试过@Input,似乎无法获胜.

儿童

export class UserheaderComponent implements OnInit,AfterViewInit,OnChanges {
  loading;
  @Input() data;
  user = {
    name: '______________',icon: '',username: '_________',uid: '________'
  };
  constructor(private router: Router) {
  }

  goToUser(uid) {
    this.router.navigate(['user'],{ queryParams: { uid: uid } });
  }

  ngOnInit() {
    this.user = this.data;
    console.log(this.data);
  }

  ngAfterViewInit() {
    console.log(this.data);
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }
}

家长Html

<router-outlet name='userprofile-userhead' [data]="currentUser"></router-outlet>

家长TS

export class UserprofileComponent {
  public currentUser;

  constructor(
    private userFactory: UserFactory,private router: Router,private snack: MatSnackBar) {
    this.userFactory.checkSession(exists => {
      if (!exists) {
        return;
      }
      this.userFactory.getSessionUser((uid,user) => {
        this.currentUser = user;
      });
    });
  }
}

和路由

path: '',component: UserprofileComponent,outlet: 'userprofile',children: [
          { path: '',component: UserheaderComponent,outlet: 'userprofile-userhead' },]

什么都没有传递给孩子,这种安排是否可能,或者我错过了什么？

无法使用共享服务.

每个组件都应该使用它自己的Id.想象一下,这是一个像上下文这样的帖子的时间轴,比如社交媒体时间轴,这是帖子的头,你知道,用户图标,名称……用户名是.因此,’post’组件会将其作为子项注入,并将其传递给用户对象：{name：’…’,用户名：’…’},所以我看不到服务在这里会做什么.

现在,当我们在应用程序的某个地方,一个配置文件组件,搜索组件可能会调用此…

如果你仍然认为服务会做,请详细说明.

我找到了你,但我认为共享服务仍然是这个问题的答案

您可以尝试实现一个pub / sub服务,您可以在其中分配它将订阅和广播的数据.

试试这个：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

/**
 * Publisher/Subscriber Service
 */
@Injectable()
export class PubSubService {

    private events: any = {};

    constructor() { }

    /**
     * Subscribes the instance of the assigned event name
     * @param eventName
     * Event name of the delegate
     */
    public On(eventName: PubSubEvents): Observable<any> {

        if (typeof this.events[eventName] === 'undefined') {
            this.events[eventName] = new Subject<any>();
        }

        return this.events[eventName].asObservable();
    }

    /**
     * Broadcast data to the specified event channel
     * @param eventName
     * Event name of the delegate
     * @param eventArgs
     * Arguments to pass through to the connected channel
     */
    public Broadcast(eventName: PubSubEvents,eventArgs: any) {
        if (!this.events[eventName]) {
            return;
        }

        this.events[eventName].next(eventArgs);
    }

}

//Your events
export declare type PubSubEvents =
    "OnChild1" | "OnChild2";

在父组件中,您可以根据需要订阅所有事件.

亲

constructor(private pubsub: PubSubService){
  this.pubsub.On("OnChild1").subscribe((res) =>{ //Child 1 data}));
  this.pubsub.On("OnChild2").subscribe((res) =>{ //Child 2 data}));
}

而在子组件中你必须这样做

孩子1

constructor(private pubsub: PubSubService){
  this.pubsub.Broadcast("OnChild1","your_data")
}

孩子2

constructor(private pubsub: PubSubService){
  this.pubsub.Broadcast("OnChild2","your_data")
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!