我需要访问父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;
}
答案 0 :(得分:18)
$(document).ready(function() {
$("#billing_country,#shipping_country").select2();
});
答案 1 :(得分:1)
在子组件中,在构造函数中传递父级:
constructor(
private parent: ParentComponent,
...
)
ngAfterViewInit() {
console.log(this.parent);
}
答案 2 :(得分:1)
子组件不应更新父组件的属性。而是让孩子发出事件,父母改变属性。文档在Component Interaction section中有一个示例。
答案 3 :(得分:0)
用于访问父级的值,您可以使用@input。用于更改父值 试试这个例子
子组件
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);
}
}
子html部分
<div>
<p>Count: {{ count }}</p>
<button (click)="increment()">Increment</button>
</div>
父组件
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;
}
}
父html部分
<div>
Parent Num: {{ num }}<br>
Parent Count: {{ parentCount }}
<rio-counter [count]="num" (result)="assignparentcount($event)">
</rio-counter>
</div>
答案 4 :(得分:0)
如果要从父组件获取数据,则可能需要查看组件之间的数据交换方法。在我看来,您可能想看看Input装饰器。
您可以执行以下操作:
<app-spinner show="true"></app-spinner>
要么
<app-spinner show="isBusy()"></app-spinner>