加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

如何访问在父组件上定义的ViewChild引用 – Angular 2

发布时间:2020-12-17 17:51:25 所属栏目:安全 来源:网络整理
导读:我在app模板(根组件的模板)中定义了一个spinner / loader元素 !--I have it here so that I don't have to paste it in all my templates--div #spinner/div 在我的子组件中,我试图使用@ViewChild访问它,但似乎总是返回undefined.我在子组件中访问它的代码是
我在app模板(根组件的模板)中定义了一个spinner / loader元素

<!--I have it here so that I don't have to paste it in all my templates-->
<div #spinner></div>

在我的子组件中,我试图使用@ViewChild访问它,但似乎总是返回undefined.我在子组件中访问它的代码是

@ViewChild('spinner',{ read: ViewContainerRef }) container: ViewContainerRef;  //this is always undefined

但是当我将#spinner放在我的子组件的HTML中时,它会被正确地拾取.

有没有办法将子组件中父组件中定义的元素作为ContainerRef?

我需要视图引用来使用ComponentFactoryResolver动态创建组件.

这似乎是一个similar问题,但无法找到克服的方法.

编辑:我现在使用与observable的共享服务,但它仍然没有在.next上引发事件.

这是我在SpinnerComponent中的代码

@Component({
    selector: 'spinner',styleUrls: ['app/styles/spinner.component.css'],template:
    `<div [hidden]="state.visible" class="in modal-backdrop spinner-overlay"></div>
     <div class="spinner-message-container" aria-live="assertive" aria-atomic="true">
        <div class="spinner-message" [ngClass]="spinnerMessageClass">{{ state.message }}</div>
    </div>`
})
export class SpinnerComponent {

    constructor(spinnerService: SpinnerService) {
        spinnerService.spinnerStatus.subscribe(event => {
            console.log('Event: ' + event); <= not getting called
            this.state.visible = event;
        });
    }

    public state = {
        message: 'Please wait...',visible: false
    };
}

在SpinnerService中,我有

@Injectable()
export class SpinnerService {
    public events: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

    public get spinnerStatus(): Observable<boolean> {
        return this.events.asObservable();
    }

    public showSpinner() {
        this.events.next(true);
    }

    public hideSpinner() {
        this.events.next(false);
    }
}

在调用组件中,我有

@Component({
    selector: 'edit-auction',templateUrl: '/auctions/edit.html'
})
export class EditAuctionComponent {

    constructor(public spinnerService: SpinnerService) {  }

    ngAfterViewInit() {
        //start the spinner
        this.spinnerService.showSpinner();
    }
}

在app.module.ts(根模块)

@NgModule({
    imports: [BrowserModule,FormsModule,HttpModule,routes],declarations: [..],providers: [NotificationsService,SpinnerService],bootstrap: [AppComponent]
})
export class AppModule { }

解决方法

从其他组件访问数据对我来说听起来不太好.

对于您要做的事情,最好的方法是定义将共享可观察的服务:

@Injectable()
export class EventService {
    public selectedCategoryName: string = '';
    private events = new BehaviorSubject<Boolean>(false);
    constructor() {

    }

    public showSpinner(){
        this.events.next(true)
    }

    public hideSpinner(){
        this.events.next(false);
    }

    public get spinnerStatus() : Observable<boolean> {
        return this.events.asObservable();
    }
}

然后在您的根组件中,您将订阅

eventServiceInstance.spinnerStatus.subscribe(state=>{
            //thisSpinner.visible = state
        })

而现在在其他所有地方你都会打电话

eventServiceInstance.showSpinner()
eventServiceInstance.hideSpinner()

PS.为了使其工作,应在NgModule中添加EventService提供程序,而不是在组件内部

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读