角2-变化类到另一个

Question

我有2成分 - A，B 并从变化B的class.for例如改变要NG-有效到NG-无效

<A #a></A > <B> </B>

从BI希望将类给A，或将A的ng有效类更改为ng无效。

Answer 1

看到这个plunker得到的如何做到这一点的想法：https://plnkr.co/edit/wz771Lnnn3GjHWFmykGl?p=preview

当你评论，你可以使用一个@Input以访问该组件..

import {Component, NgModule, Input, ElementRef} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'AComp', 
    template: 'a-component', 
    styles: [ 
    ':host(.ng-valid) { color: green; font-weight: bold; }', 
    ':host(.ng-invalid) { color: red; font-weight: bold; }' 
    ] 
}) 
export class AComp { 

    constructor(private _eRef: ElementRef) {} 

    public addClass(c: string) { 
    console.dir(this._eRef); 
    this._eRef.nativeElement.classList.add(c); 
    } 

    public removeClass(c: string) { 
    this._eRef.nativeElement.classList.remove(c); 
    } 

} 

@Component({ 
    selector: 'BComp', 
    template: 'b-component' 
}) 
export class BComp { 

    @Input('a-comp') private _aComp: AComp; 

    constructor() { } 

    ngOnInit() { 
    this._aComp.addClass('ng-valid') 
    setTimeout(() => this._aComp.addClass('ng-invalid'), 1000); 
    setTimeout(() => this._aComp.removeClass('ng-invalid'), 3000); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <AComp #acmp></AComp> 
     <br /> 
     <BComp [a-comp]="acmp"></BComp> 
    </div> 
    `, 
}) 
export class App { 
    constructor() { 
    this.name = 'Angular2' 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, AComp, BComp ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}