Question

我已经按照Todd Motto的一段代码在路由期间根据路由数据中提供的配置自动更改浏览器的标题，并且效果很好。

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

如果您想从通过路由器事件过渡到新状态时构建的组件树中获取组件实例 - 我不会认为＆＃ 39;目前可能。

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

<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>

Angular 2：在路由期间向组件添加类

1 个答案: