如何获取 angular2 组件的父 DOM 元素引用
How to get the parent DOM element reference of an angular2 component
我需要访问父 DOM 元素的一些属性,其中包含我想从中获取信息的组件,有没有办法做到这一点?
这是我的组件的样子:
import { Component, Input } from "@angular/core";
import "./loadingSpinner.component.css!";
@Component({
selector: "loading-spinner",
template: `
<div *ngIf="showSpinner" class="loader-directive-wrapper">
<div class="loader"></div>
</div>`
})
export class LoadingSpinnerComponent {
@Input() public showSpinner: boolean = false;
}
在您的子组件中,在构造函数中传递父组件:
constructor(
private parent: ParentComponent,
...
)
ngAfterViewInit() {
console.log(this.parent);
}
child 组件不应更新 parent 上的属性。而是让 child 发出事件并让 parent 更改属性。文档在 Component Interaction section.
中有一个示例
要访问 parent 的值,您可以使用 @input。用于更改 parent 值
试试这个例子
child 分量
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'rio-counter',
templateUrl: 'app/counter.component.html'
})
export class CounterComponent {
@Input() count = 0;
@Output() result = new EventEmitter<number>();
increment() {
this.count++;
this.result.emit(this.count);
}
}
child html 部分
<div>
<p>Count: {{ count }}</p>
<button (click)="increment()">Increment</button>
</div>
parent 组件
import { Component } from '@angular/core';
@Component({
selector: 'rio-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
num = 0;
parentCount = 0;
assignparentcount(val: number) {
this.parentCount = val;
}
}
parent html 部分
<div>
Parent Num: {{ num }}<br>
Parent Count: {{ parentCount }}
<rio-counter [count]="num" (result)="assignparentcount($event)">
</rio-counter>
</div>
constructor(elementRef:ElementRef) {
elementRef.nativeElement.parentElement....
}
如果要从父组件获取数据,可能需要查看组件之间的数据交换方法。在我看来,您可能想看一下 Input 装饰器。
你可以这样做:
<app-spinner show="true"></app-spinner>
要么
<app-spinner show="isBusy()"></app-spinner>
我需要访问父 DOM 元素的一些属性,其中包含我想从中获取信息的组件,有没有办法做到这一点?
这是我的组件的样子:
import { Component, Input } from "@angular/core";
import "./loadingSpinner.component.css!";
@Component({
selector: "loading-spinner",
template: `
<div *ngIf="showSpinner" class="loader-directive-wrapper">
<div class="loader"></div>
</div>`
})
export class LoadingSpinnerComponent {
@Input() public showSpinner: boolean = false;
}
在您的子组件中,在构造函数中传递父组件:
constructor(
private parent: ParentComponent,
...
)
ngAfterViewInit() {
console.log(this.parent);
}
child 组件不应更新 parent 上的属性。而是让 child 发出事件并让 parent 更改属性。文档在 Component Interaction section.
中有一个示例要访问 parent 的值,您可以使用 @input。用于更改 parent 值 试试这个例子
child 分量
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'rio-counter',
templateUrl: 'app/counter.component.html'
})
export class CounterComponent {
@Input() count = 0;
@Output() result = new EventEmitter<number>();
increment() {
this.count++;
this.result.emit(this.count);
}
}
child html 部分
<div>
<p>Count: {{ count }}</p>
<button (click)="increment()">Increment</button>
</div>
parent 组件
import { Component } from '@angular/core';
@Component({
selector: 'rio-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
num = 0;
parentCount = 0;
assignparentcount(val: number) {
this.parentCount = val;
}
}
parent html 部分
<div>
Parent Num: {{ num }}<br>
Parent Count: {{ parentCount }}
<rio-counter [count]="num" (result)="assignparentcount($event)">
</rio-counter>
</div>
constructor(elementRef:ElementRef) {
elementRef.nativeElement.parentElement....
}
如果要从父组件获取数据,可能需要查看组件之间的数据交换方法。在我看来,您可能想看一下 Input 装饰器。
你可以这样做:
<app-spinner show="true"></app-spinner>
要么
<app-spinner show="isBusy()"></app-spinner>