Angular: 从路由更改父组件的字段

Question

各位！

我需要你的帮助。我的 Angular 10 应用程序中有一个组件，我们将其命名为 A.

在这个组件中，我有 <router-outlet> 以及 routes.ts 文件中描述的路由。

我需要的是通过单击某个 B 组件中的按钮来更改 A 组件中的变量（字段），即 <router-outlet> 中的路由。我该怎么做？

例如，我们可以讨论这样的变体。

A.component.html

<B [changeFieldOfA]="func"></B>

A.component.ts

export class A {
    foo: string = "";
    func() {
        this.foo = "bar";
    }
}

这一切都很酷，因为我可以传递函数，将我的 A 组件字段更改为我的组件。

但是如果我有这个变体怎么办？:

A.component.html

<router-outlet></router-outlet>

routes.ts

{path: "b", component: B}

我想在 B 中调用这个属于 A（并更改其字段）的 func()，但我不能再通过 Input() 来完成它，因为在路由器中我不能这样做。

Answer 1

Demo组件之间可以使用服务进行通信

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class ShareService  {   
  constructor() { } 
  private paramSource = new BehaviorSubject("");
  sharedData = this.paramSource.asObservable();
  setParam(param:string) { this.paramSource.next(param)}    
}

投入使用

this.shareService.setParam('Sending param');

从服务中获取

 this.shareService.sharedData.subscribe(data=> { this.your_variable=data })

构造器喜欢

constructor(private shareService: ShareService  ){}

Angular: 从路由更改父组件的字段

Angular: Change field of parent component from route

typescript

angular

angular10