如何访问在父组件上定义的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提供程序,而不是在组件内部 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- twitter bootstrap css / javascript库中的“popover”问题
- 解决YUM下Loaded plugins: fastestmirror Determining fast
- 算法图解之递归
- Rxjs实践技巧:从一个小案例说开去
- angular – 打字无法在Ionic 2 App中找到提供者
- unix – 如何在“grep”之后“cd”到目录?
- Redis系列三:reids常用命令
- array – 为什么`Array(0,1,2)== Array(0,1,2)`不返回预期的
- (8.1.3)webservice的性能测试:soapUI
- scala – HashSet和Set之间有什么区别,何时应该是每个