Angular4: 如何通过路由将数据从父组件传递给动态添加的子组件

14 浏览
0 Comments

Angular4: 如何通过路由将数据从父组件传递给动态添加的子组件

继续从这个问题 Angular 4^ : How to have more than one child of a component with each child targeting its own router outlet，我能够将一些子组件注入到多个父组件中，现在我想将数据从这些父组件异步传递给子组件。尝试了 @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

父组件的 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。想象一下，这个组件是在帖子的时间线上下文中，就像社交媒体时间线一样，这是一个帖子的头部，你知道，用户图标、名称...用户名在这里。所以一个'帖子'组件将把它作为子组件注入进来，传递给它一个用户object:{name:'...',username:'...'}，所以我不明白服务在这里该怎么用。

现在，当我们在这里，应用程序的某个地方，一个个人资料组件、一个搜索组件可能会调用这个...

如果你仍然认为服务是可行的，请详细说明。

0

3 答案

0 Comments

Angular4中，当通过路由添加子组件时，如何将数据从父组件传递给子组件？

在这种情况下，一种有效的方法是在UserheaderComponent的路由中添加一些参数，然后在组件初始化时获取它，并从服务中获取期望的数据。

首先，你需要将它添加到组件的路由路径中：

path: 'userHead/:userId'

然后，在重定向到该组件时，你需要设置这个参数，然后在组件初始化时可以获取它：

this.activatedRoute.params.subscribe((params) => { const userHead= params['userId']; })

最后，根据该参数，你可以从服务中获取期望的数据。

如果只有一个子组件，可以考虑直接使用组件，而不是使用router-outlet：

0
0 Comments

Angular4中，如果通过路由添加子组件，如何将数据从父组件传递给子组件？

问题的原因：

在Angular中，通过路由添加的子组件无法直接从父组件中获取数据。因此，需要找到一种解决方法来实现这一功能。

解决方法：

一种解决方法是在路由路径中添加参数，然后在子组件中订阅这个参数来获取数据。具体步骤如下：

1. 在路由配置中，将路径设置为{ path: 'userHead/:Id' }，其中Id是要传递给子组件的数据。

2. 在父组件中，通过函数或直接调用this.router.navigate(['/userHead', id]);来导航到子组件。

3. 在子组件的ngOnInit()方法中，通过订阅路由参数的id来获取数据。具体代码如下：

ngOnInit() {
  this.ActivatedRoute.params.subscribe(params => {
    this.id = +params['id']; // (+) converts string 'id' to a number
    if (!isNaN(this.id)) {
     // 在这里可以根据id进行相应的逻辑处理
  });
}

除了上述方法，还可以使用BehaviorSubjects来实现数据传递。如果需要了解关于BehaviorSubjects的更多信息，可以提出问题，我会尽力提供相应的代码。

0
0 Comments

在Angular4中，如果需要从父组件向通过路由添加的子组件传递数据，可以使用共享服务来解决这个问题。下面提供了一种使用发布/订阅服务的方法，通过该服务可以指定数据的订阅和广播。

首先，需要创建一个名为PubSubService的共享服务。这个服务包含了两个方法：On和Broadcast。On方法用于订阅指定事件的实例，而Broadcast方法用于向指定的事件通道广播数据。

在父组件中，可以通过订阅所有需要的事件来接收数据。在构造函数中使用PubSubService的实例来调用On方法，并传入需要订阅的事件名称。然后通过subscribe方法来处理接收到的数据。

在子组件中，需要通过调用PubSubService的实例来调用Broadcast方法，并传入需要广播的事件名称和数据。

下面是具体的代码示例：

import { Injectable } from '/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 {
        if (typeof this.events[eventName] === 'undefined') {
            this.events[eventName] = new Subject();
        }
        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";

在父组件中，可以通过构造函数注入PubSubService，并在构造函数中订阅需要的事件。例如：

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

在子组件中，可以通过构造函数注入PubSubService，并在构造函数中调用Broadcast方法来广播数据。例如：

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


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

通过使用这种方法，就可以在父组件和通过路由添加的子组件之间传递数据了。

0