は、私がこれに似たコンポーネントの階層を持つ角度

Question

で壮大祖父母コンポーネントへの参照を取得します：

gggrandparent-> ggrandparent -> grandparent -> parent -> child 

子供がabsolute LYを表示してgggrandparentの高さを認識する必要があります。 gggrandparentの高さは、子供の一部がdisplay:noneであり、childがこの変更に対応する必要があるため、時間外に変更されます。

gggrandparentの高さをchild.component.tsファイル内に収めるためのエレガントな方法は何ですか？ @Input（）の多重度を渡すことは過度のようです。私が考えることができる唯一の他のオプションはObservableパターンとプレーンJSを実装することですが、私は角度がこのシナリオを処理する独自の方法を持っています。

Answer 1

@Directive({ 
    selector: '[parentHeight]' 
}) 
export class ParentHeightDirective { 
    constructor(private elementRef:ElementRef) {} 

    int get height() { 
    return this.elementRef.nativeElement.height; 
    } 
} 

<grand-grand-parent parentHeight> 
    <grand-parent> 
    <parent> 
     <child></child> 
    </parent> 
    </grand-parent> 
</grand-grand-parent> 

@Component({ 
    selector: 'child', 
    ... 
}) 
export class ChildComponent { 
    constructor(private parentHeight:ParentHeightDirective) {} 

    ngOnInit() { // or any other method 
    console.log(this.parentHeight.height); 
    } 
} 

parentHeightの間の任意の成分に添加されていない場合、依存性注入は、最初のを注入するので、それは（AppComponent及びアプリケーションに向かって上向きに注入成分から見て発見これだけ作品ルートスコープ）。
ParentHeightDirectiveを使用せずにこれを行うこともできますし、コードをGrandParentComponentに入れて代わりにそれを挿入することもできますが、ディレクティブは再利用性が良く、ネストされたGrandGrandParentComponentを許可します。この指令を適用してください。