Question

我想从在路由器插座内部渲染的子组件进行导航。我的父组件有一个路由器配置，我想手动导航一些事件。但我不知道如何在没有输出的情况下从孩子传给父母一些数据（用于导航）。因为这种结构不起作用

 <router-outlet (navigateTo)="navigateToMessagePart($event)"></router-outlet>

我怎么能以正确的方式做到这一点？也许从孩子那里导航吧？但我如何从孩子那里得到父方法。非常感谢您的帮助！

Answer 1

<router-outlet></router-outlet>不能用于从子组件发出事件。在两个组件之间进行通信的一种方法是使用公共服务。

创建服务

共享service.ts

import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class SharedService {
    // Observable string sources
    private emitChangeSource = new Subject<any>();
    // Observable string streams
    changeEmitted$ = this.emitChangeSource.asObservable();
    // Service message commands
    emitChange(change: any) {
        this.emitChangeSource.next(change);
    }
}

现在在父组件和子组件的构造函数中注入上述服务的实例。

每次调用onClick（）方法时，子组件都会发出更改

child.component.ts

import { Component} from '@angular/core';
@Component({
    templateUrl: 'child.html',
    styleUrls: ['child.scss']
})
export class ChildComponent {
    constructor(
        private _sharedService: SharedService
    ) { }

onClick(){
  this._sharedService.emitChange('Data from child');

 }
}

父组件应接收该更改。为此，请在父级构造函数中捕获订阅。

parent.component.ts

import { Component} from '@angular/core';
@Component({
    templateUrl: 'parent.html',
    styleUrls: ['parent.scss']
})
export class ParentComponent {
    constructor(
        private _sharedService: SharedService
    ) {
          _sharedService.changeEmitted$.subscribe(
        text => {
            console.log(text);
        });
      }

}

希望这会有所帮助：）

Answer 2

<router-outlet (activate)="componentAdded($event)" (deactivate)="componentRemoved($event)"></router-outlet>只是添加路由组件的占位符。不支持任何类型的绑定。

您可以创建一个自定义componentAdded()，允许您执行此操作或更常见，使用共享服务在父组件和路由组件之间进行通信。

有关详细信息，请参阅$project

<强>更新

现在有一个事件允许获取添加的组件

{{1}}

允许与{{1}}

中的组件进行通信（调用getter，setter和方法）

虽然共享服务是首选方式。

Answer 3

上面给出的答案是正确和完整的。我只想为那些解决方案对他们不起作用的人添加他们应该只在父组件而不是子组件中将服务添加到提供者以确保获得服务的单个，否则两个服务实例将是创建。这个回复的灵感来自于之前回复中@HeisenBerg的评论。

Answer 4

我对安塔拉·达塔的回答有所改变。我创建了订阅者服务

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

@Injectable({
  providedIn: 'root'
})
export class Subscriber<T>
{
  protected observable = new Subject<T>();

  public next(item: T)
  {
    this.observable.next(item);
  }

  public subscribe(callback: (item:T)=>void) {
    this.observable.subscribe(callback);
  }
}

每当我需要两个组件来共享一些信息时，我都会将该服务注入订阅该服务的构造函数中：

 constructor(protected layoutOptions: Subscriber<Partial<LayoutOptions>>)
 {
    layoutOptions.subscribe(options => this.options = Object.assign({}, this.options, options));
 }

和更新它的人

constructor(protected router: Router, protected apiService: ApiService, protected layoutOptions: Subscriber<Partial<LayoutOptions>>)
  {
    this.layoutOptions.next({showNavBar: false});
  }

Answer 5

我无法理解为什么路由器不转发“@Outputs”。

我最终发送了准系统 DOM 事件

// dom node needs to be a reference to a DOM node in your component instance
// preferably the root
dom.dispatchEvent(
      new CustomEvent('event', {
        detail: payload, // <- your payload here
        bubbles: true,
        composed: true,
      })
    );

您可以像任何其他 DOM 事件一样在 DOM 树的任何位置捕获它

注意：您需要在接收端从 { detail: payload } 解压有效载荷..

路由器插座的角度2输出

5 个答案: