Angular 6 child 到 Parent 通过路由器出口交互
Angular 6 child to Parent interaction through router outlet
我的应用程序组件有两个 child 组件,即第一个和第二个,我正在通过路由器插座标签进行导航。我想在单击 child 组件按钮时将 parent 组件变量更改为 '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";
}
app-routing.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(){
}
}
欢迎来到 Stack Overflow!
Angular6:
中有一个技巧可以使用
通过在子组件上注入 ViewContainerRef:
constructor(private viewContainerRef: ViewContainerRef) { }
而且你可以这样访问:
getParentComponent() {
return this.viewContainerRef[ '_data' ].componentView.component.viewContainerRef[
'_view' ].component
}
this.getParentComponent().myvar = "XYZ"
您可能需要一个事件发射器:
<router-outlet (messageEvent)="buttonClicked($event)"></router-outlet>
然后在子ts文件上:
将 Output 和 EventEmitter 添加到您的导入语句中。
添加 @Output 语句
然后添加 this.messageEvent.emit('pressed');
对于这个故事:
您应该创建一个保存变量的服务。
我的-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 方法。
fist.component.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();
}
}
我的应用程序组件有两个 child 组件,即第一个和第二个,我正在通过路由器插座标签进行导航。我想在单击 child 组件按钮时将 parent 组件变量更改为 '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";
}
app-routing.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(){
}
}
欢迎来到 Stack Overflow!
Angular6:
中有一个技巧可以使用通过在子组件上注入 ViewContainerRef:
constructor(private viewContainerRef: ViewContainerRef) { }
而且你可以这样访问:
getParentComponent() {
return this.viewContainerRef[ '_data' ].componentView.component.viewContainerRef[
'_view' ].component
}
this.getParentComponent().myvar = "XYZ"
您可能需要一个事件发射器:
<router-outlet (messageEvent)="buttonClicked($event)"></router-outlet>
然后在子ts文件上:
将 Output 和 EventEmitter 添加到您的导入语句中。
添加 @Output 语句
然后添加 this.messageEvent.emit('pressed');
对于这个故事:
您应该创建一个保存变量的服务。
我的-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 方法。
fist.component.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();
}
}