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.routeroutletponent); } }我遇到此错误
core.es5.js:1224 ERROR Error: Outlet is not activated at RouterOutlet.get [as component] (router.es5.js:5449) at AppComponent.onRefreshscrum (appponent.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)
console result:(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.
The above console result is for console the routeroutlet obj.
我想访问在路由器出口呈现的组件的实例.我如何访问该组件的实例?
I want to access the instance of the component which is rendered in router-outlet. how i access the instance of the component?
推荐答案不要尝试将RouterOutlet用作提供程序.而是将(activate)属性添加到路由器出口标签中,如下所示:
Don't try to use RouterOutlet as a provider. Instead add the (activate) attribute to your router-outlet tag like this:
<router-outlet (activate)="onRouterOutletActivate($event)"></router-outlet>然后在包含router-outlet元素的组件(您的AppComponent类)中,应实现onRouterActivate方法:
And then in the component containing the router-outlet element (your AppComponent class) you should implement the onRouterActivate method:
public onRouterOutletActivate(event : any) { console.log(event); },它将在事件参数中为您提供路由组件实例,在此示例中,该参数已写入Web控制台.
which will give you the route component instance in the event parameter, in this example written to the web console.
更多推荐
Angular:如何获取路由器出口的组件实例
发布评论