Angular:如何获取路由器 socket 的组件实例

标签 angular angular-ui-router angular2-routing angular-routing

html:

<router-outlet></router-outlet>

组件:

@Component({
      selector: 'xx',
      templateUrl: './xx.html',
      styleUrls: ['./xx.css'],
      providers: [ RouterOutlet]
    })
    export class AppComponent {
    constructor(private routeroutlet: RouterOutlet){ }
    getref() {
     console.log(this.routeroutlet);
     console.log('refresh', this.routeroutlet.component);
    }
}

我遇到了这个错误

core.es5.js:1224 ERROR Error: Outlet is not activated
    at RouterOutlet.get [as component] (router.es5.js:5449)
    at AppComponent.onRefreshscrum (app.component.ts:343)
    at Object.eval [as handleEvent] (AppComponent.ngfactory.js:111)
    at Object.handleEvent (core.es5.js:12251)
    at Object.handleEvent (core.es5.js:12975)
    at dispatchEvent (core.es5.js:8863)
    at eval (core.es5.js:11025)
    at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3851)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:223)
    at SafeSubscriber.next (Subscriber.js:172)

控制台结果:(this.routeroutlet)

RouterOutlet {
parentContexts: ChildrenOutletContexts, 
location: null, 
resolver: CodegenComponentFactoryResolver, 
changeDetector: ViewRef_, 
activated: null, …}activateEvents: EventEmitter {_isScalar: false, observers: Array(0), 
closed: false, 
isStopped: false, 
hasError: false, 
…}
closed: false
hasError: false
isStopped: false
observers: []thrown
Error: null
__isAsync: false
_isScalar: false
__proto__: Subject
activated: null
activatedRoute: (...)activatedRouteData: (...)changeDetector: ViewRef_ {_view: {…}, _viewContainerRef: null, _appRef: null}
component: [Exception: Error: Outlet is not activated
    at RouterOutlet.get [as component] (webpack:///./~/@angular/router/@angular/router.es5.js?:5449:23)
    at RouterOutlet.remoteFunction (<anonymous>:2:26)]deactivateEvents: EventEmitter {_isScalar: false, observers: Array(0), 
closed: false, 
isStopped: false, 
hasError: false, …}
isActivated: (...)location: nulllocationFactoryResolver: (...)l
ocationInjector: (...)name: "primary"
parentContexts: ChildrenOutletContexts {contexts: Map(1)}resolver: CodegenComponentFactoryResolver {_parent: null, _ngModule: NgModuleRef_, _factories: Map(52)}_activatedRoute: null__proto__: ObjectactivateWith: ƒ (activatedRoute, resolver)activatedRoute: (...)activatedRouteData: (...)attach: ƒ (ref, activatedRoute)component: (...)deactivate: ƒ ()detach: ƒ ()isActivated: (...)locationFactoryResolver: (...)locationInjector: (...)ngOnDestroy: ƒ ()ngOnInit: ƒ ()arguments: (...)caller: (...)length: 0name: ""prototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: router.es5.js:5400[[Scopes]]: Scopes[3]constructor: ƒ RouterOutlet(parentContexts, location, resolver, name, changeDetector)get activatedRoute: ƒ ()get activatedRouteData: ƒ ()get component: ƒ ()get isActivated: ƒ ()get locationFactoryResolver: ƒ ()get locationInjector: ƒ ()__proto__: Object

上面的控制台结果是针对 routeroutlet obj 的控制台。

我想访问在 router-outlet 中呈现的组件实例。我如何访问组件的实例?

最佳答案

不要尝试使用 RouterOutlet 作为提供者。而是将 (activate) 属性添加到您的 router-outlet 标签中,如下所示:

<router-outlet (activate)="onRouterOutletActivate($event)"></router-outlet>

然后在包含 router-outlet 元素的组件(您的 AppComponent 类)中,您应该实现 onRouterOutletActivate 方法:

public onRouterOutletActivate(event : any) {
    console.log(event);
}

这将在事件参数中为您提供路由组件实例,在本例中写入网络控制台。

关于Angular:如何获取路由器 socket 的组件实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45587507/

相关文章:

javascript - Angular数据同步问题

angular - 订阅嵌套的 Observable

javascript - Angular 2 一个组件中的多条路线

angularjs - 更新 ui.router 父状态中的已解析对象

Angular 2 - routerLink 不适用于外部链接

angular - material2数据表的使用方法

xml - 在 Angular 5 中使用 XML 数据发出 Post 请求

angularjs - 更新 Angular 中的 Controller /UI 元素

javascript - Angular 2 Material - 路由器动画破坏了 sidenav 内容和滚动

Angular 2 Router.navigate 在服务中。好的做法?