如何获取angular2组件的父DOM元素引用

时间:2016-12-21 23:02:23

标签: angular dom angular2-components

我需要访问父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;
    } 

5 个答案:

答案 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>

在这里查看:https://angular.io/guide/inputs-outputs