Question

我有一个基于bootstrap3的模板，我正在为它添加angular2。

当我将路径从SignIn更改为应用程序的其余部分时，我需要更改正文的类，这是我的根组件选择器。

根组件

@Component({
    selector: 'body',
    directives: [ROUTER_DIRECTIVES],
    templateUrl: '<router-outlet></router-outlet>'
})
export class AppComponent {

    loggedIn = true;

    @HostBinding('class.class1')
    @HostBinding('class.home-page') homeBodyClasses = false;

    @HostBinding('class.class3')
    @HostBinding('class.login-page') loginBodyClasses = false;

    constructor(private router: Router) { }

    ngOnInit() {
        if (!this.loggedIn) {
            this.router.navigate(['SignIn']);
        } else {
            this.router.navigate(['Home']);
        }
          this.router.events.subscribe(event => {
            console.log(event);
            if (event instanceof NavigationEnd) {
                if (event.urlAfterRedirects === '/SignIn') {
                    this.homeBodyClasses = false;
                    this.loginBodyClasses = true;
                }else{
                      this.homeBodyClasses = true;
                    this.loginBodyClasses = false;
                }
            }
        });
    }

我订阅了路由器导航事件，但是当更改网址时没有任何反应，尽管@HostBinding的值已经更改。

我尝试将子组件中的事件发送到正文并更改正文标记以捕获这样的事件，但没有发生任何事情。

<body (eventName) = "changeBodyClass($event)"></body>

我做错了什么？我不明白何时应该更改@HostBinding的值以使其生效。我正在使用angular2.0.0-rc.5

Answer 1

您不能在app-root组件之外使用@HostBinding。

您可以使用body作为应用程序根组件的选择器，然后使用@HostBinding，也可以使用Renderer2修改主体类。不建议使用jquery来做到这一点。

使用Renderer2，您可以做类似的事情

renderer.addClass(document.body, "myClass");

或

renderer.removeClass(document.body, "myClass");

在Angular 2中动态更改@HostBinding的body类

1 个答案:

在Angular 2中动态更改@HostBinding的bo​​dy类

1 个答案:

在Angular 2中动态更改@HostBinding的body类