Angular2 ：从组件中获取同级组件模板中的元素

Question

哪里需要从同级组件访问元素，但不需要从父 Cmp 访问元素。

例：

需要组件 B 的 templateA 中的 iframe 元素来隐藏
或删除该元素。

index.html

<component-A> </component-A>
<component-B> </component-B>

ComponentA.html

<div>
  <iframe id="someIframe"></iframe>
</div>

<div>
   <form id="someForm"></form>
</div>

@组件

({
 selector:'component-A',
 templateUrl:'/componentA.html'

})

constructor() {

}

@组件

({
 selector:'component-B',
 templateUrl:'/componentB.html'

})

constructor() {
 //need to get hold of the iframe element to hide that.
}

Answer 1

我当然不想直接从组件B中访问元素，你会想让它们分离。

解决这个问题的2种可能方法是：

• 使用包含切换的服务隐藏或显示iframe
• 或者可以使用事件机制，从组件A侦听的组件B触发事件，并相应地切换iframe元素

Answer 2

有几种方法可以在兄弟姐妹之间共享数据：

Answer 3

您可以使用@ViewChild来获取同级组件。所以你的组件B类应该看起来像这样;

import {Component,ViewChild,AfterViewInit} from 'angular2/core';
import {ComponentA}         from './componentA';

@Component({
    selector: 'component-B',
    templateUrl: '/componentB.html'
})
export class ComponentB implements AfterViewInit{
    @ViewChild(ComponentA) 
    child:ComponentA; //say get the first instance of ComponentA

    ngAfterViewInit() {
        console.log(this.child); //access the child here
    }
}