0

我有两个子组件的应用程序组件，即第一个和第二个，我正在通过路由器出口标签导航。单击子组件按钮时，我想将父组件变量更改为“XYZ”。

app.component.html

<a routerLink = "/first">
  First
</a>
<a routerLink = "/second">
  Second
</a>
<div>
  <router-outlet></router-outlet>
</div>
{{myvar}}

app.component.ts

export class AppComponent {
  title = 'childParentInteraction';
  myvar : String = "ABCD";
}

应用程序路由.module.ts

const routes: Routes = [
  {
    path:"first", component: FirstComponent
  },
  {
    path:"second",component: SecondComponent
  }
];

first.component.html

<div>
    <p>first works!</p>
    <button (click)="changeVar()">
        Change variable
    </button>
</div>

first.component.ts

export class FirstComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  changeVar(){
  }
}
4

3 回答 3

0

欢迎来到堆栈溢出！

您可以在 Angular 6 中使用一个技巧：

通过在子组件上注入 ViewContainerRef：

constructor(private viewContainerRef: ViewContainerRef) { }

而且您可以像这样访问：

getParentComponent() {
  return this.viewContainerRef[ '_data' ].componentView.component.viewContainerRef[ 
   '_view' ].component
  }

  this.getParentComponent().myvar = "XYZ"
于 2020-06-04T17:44:17.087 回答
0

你可能想要一个 eventEmitter：

<router-outlet (messageEvent)="buttonClicked($event)"></router-outlet>

然后在子 ts 文件上：

将 Output 和 EventEmitter 添加到您的导入语句中。添加一个@Output 语句然后添加this.messageEvent.emit('pressed');

于 2020-06-04T17:56:50.343 回答
0

对于这个故事：

您应该创建一个保存变量的服务。

我的var.service.ts

@Injectable({providedIn: 'root'})
export class MyVarService {
  private myVar$ = new BehaviorSubject<any>(null);
  myVar: Observable<any> = this.myVar$.asObservable();

  setMyVar(newValue: any) {
    this.myVar$.next(newValue);
  }
}

FirstComponent：您需要注入和使用服务的 setMyVar 方法。

拳头组件.ts

export class FirstComponent {

  constructor(private myVarService: MyVarService) {}

  setValue(value: any) {
    this.myVarService.setMyVar(value);
  }
}

AppComponent：你需要监听 myVar 的 observable

app.component.ts

export class AppComponent implements OnInit, OnDestroy {

  myVar: any;
  destroyer$: Subject<void> = new Subject();

  constructor(private myVarService: MyVarService) {}

  ngOnInit() {
    this.myVarService.myVar.pipe(takeUntil(this.destroyer$)).subscribe(myVar => this.myVar = myVar);
  }

  ngOnDestroy() {
    this.destroyer$.next();
    this.destroyer$.complete();
  }
}
于 2020-06-04T17:57:22.863 回答