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

前端之家收集整理的这篇文章主要介绍了Angular4:如何通过路由器添加的子节点将数据从父节点传递给子节点前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
继续这个问题 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")
}
原文链接:https://www.f2er.com/angularjs/141869.html

猜你在找的Angularjs相关文章