Angular 5中router-outlet路由组件如何实现[(token)]双向绑定？

我来帮你解决这个问题～当组件是通过路由加载的时候，确实没法像直接写组件标签那样用[(token)]双向绑定，不过有两种常用的方法可以实现同样的效果，我给你详细讲讲：

这种方法适合单一组件的场景，直接通过路由出口的激活事件拿到组件实例，手动完成双向绑定的逻辑。

步骤1：在路由组件中定义双向绑定所需的Input和Output #

首先，你的AuthenticationComponent需要满足Angular双向绑定的规则：定义一个@Input()接收token，再定义一个同名+Change后缀的@Output()事件发射器：

// authentication.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-authentication',
  templateUrl: './authentication.component.html',
  styleUrls: ['./authentication.component.css']
})
export class AuthenticationComponent {
  // 接收父组件传入的token
  @Input() token: string | null = null;
  // 用于向父组件发送token变更事件
  @Output() tokenChange = new EventEmitter<string | null>();

  // 组件内部修改token时调用这个方法，同步给父组件
  updateToken(newToken: string | null) {
    this.token = newToken;
    this.tokenChange.emit(newToken);
  }
}

步骤2：在AppComponent中监听路由出口的激活事件 #

修改app.component.html，给router-outlet添加activate事件：

<app-header></app-header>
<div class="container">
  <router-outlet (activate)="onComponentActivate($event)"></router-outlet>
</div>

步骤3：在AppComponent中绑定数据和监听事件 #

在app.component.ts里，通过激活事件拿到组件实例，手动绑定输入属性并监听输出事件：

// app.component.ts
import { Component } from '@angular/core';
import { AuthenticationComponent } from './path/to/authentication.component'; // 替换成你的组件实际路径

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  token: string | null = null;

  onComponentActivate(component: any) {
    // 只处理AuthenticationComponent
    if (component instanceof AuthenticationComponent) {
      // 把父组件的token传给子组件
      component.token = this.token;
      // 监听子组件的token变更事件，更新父组件的token
      component.tokenChange.subscribe((newToken: string | null) => {
        this.token = newToken;
      });
    }
  }
}

如果你的项目中有多个组件需要共享token状态，用共享服务的方式更灵活，不需要依赖路由出口的事件。

步骤1：创建Token共享服务 #

创建一个服务来存储和分发token的变化：

// token.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class TokenService {
  // BehaviorSubject会保存当前值，新订阅者能拿到最新值
  private tokenSubject = new BehaviorSubject<string | null>(null);
  // 对外暴露可观察对象，避免外部直接修改Subject
  token$ = this.tokenSubject.asObservable();

  // 设置token的方法
  setToken(newToken: string | null) {
    this.tokenSubject.next(newToken);
  }

  // 获取当前token的方法
  getCurrentToken() {
    return this.tokenSubject.value;
  }
}

步骤2：在AppComponent中使用服务 #

注入服务并订阅token的变化：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { TokenService } from './token.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  token: string | null = null;

  constructor(private tokenService: TokenService) {}

  ngOnInit() {
    // 订阅token变化，更新本地变量
    this.tokenService.token$.subscribe(newToken => {
      this.token = newToken;
    });
  }

  // 手动设置token的方法（如果需要）
  updateAppToken(newToken: string | null) {
    this.tokenService.setToken(newToken);
  }
}

步骤3：在AuthenticationComponent中使用服务 #

同样注入服务，获取和更新token：

// authentication.component.ts
import { Component, OnInit } from '@angular/core';
import { TokenService } from './token.service';

@Component({
  selector: 'app-authentication',
  templateUrl: './authentication.component.html',
  styleUrls: ['./authentication.component.css']
})
export class AuthenticationComponent implements OnInit {
  token: string | null = null;

  constructor(private tokenService: TokenService) {}

  ngOnInit() {
    // 订阅token变化，同步到组件本地
    this.tokenService.token$.subscribe(newToken => {
      this.token = newToken;
    });
  }

  // 组件内部修改token时，通过服务同步给所有订阅者
  updateToken(newToken: string | null) {
    this.tokenService.setToken(newToken);
  }
}

两种方法都能实现和[(token)]='token'一样的双向同步效果，你可以根据项目复杂度选择～

内容的提问来源于stack exchange，提问作者eixcs