Angular 2:在路由过程中将类添加到组件中

Question

我遵循了托德座右铭的代码段，以根据路由数据中提供的配置在路由过程中自动更改浏览器的标题，并且它运行良好。

>

export class AppComponent implements OnInit {
    constructor(private router: Router,
                private activatedRoute: ActivatedRoute,
                private titleService: Title) {}
    ngOnInit(): void {
        this.watchRouterEventsAndUpdateTitle();
    }
    watchRouterEventsAndUpdateTitle(): void {
        this.router.events
            .filter(event => event instanceof NavigationEnd)
            .map(() => this.activatedRoute)
            .map(route => {
                while (route.firstChild) {
                    route = route.firstChild;
                }
                return route;
            })
            .filter(route => route.outlet === 'primary')
            .mergeMap(route => route.data)
            .subscribe(data => {
                this.titleService.setTitle(data['title']);
            });
    }
}

我现在要做的是捕获当前路由，然后才能远离并访问该路由的组件并添加类(用于远离组件时的动画(。

(。

我已记录了路由，路由器事件等，我看不到可以挂接的任何方法或属性来修改组件。

有人有这样做的经验吗？

我要实现的示例：

export class AppComponent implements OnInit {
    // ... same code from above
    watchRouterEventsAndUpdateTitle(): void {
        this.router.events
            // ... same code from above
            // ...
            // THIS IS WHAT I NEED, or something similar
            .subscribe(component => {
                component.className = 'foo';
            });
    }
}

Answer 1

如果要从组件树从组件树中获取 component Instances ，这些树在过渡到新状态>通过路由器事件 - I不认为这是可能的。

但是您可能可以使用router-outlet发出的$event-它包含激活的组件实例：

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

您可以编写自定义指令，然后与router-outlet一起应用，该指令将其注入服务，收听activate事件并在服务上触发

@Directive({
    selector: 'interceptor',
    host: {
        '(activate)': 'onActivate(component)',
        '(deactivate)': 'onDeactivate(component)'
    }
})
export class Interceptor {
    constructor(private s: MyService) {}
    onActivate(component) {
         this.s.registerComponentActivated(component)
    }
    onDeactivate(component) {
         this.s.registerComponentDeactivated(component)
    }
}

然后像这样应用：

<router-outlet interceptor></router-outlet>