從另一個組件切換sidenav角度

我想從 Angular 中的另一個組件切換 sidenav。我有 3 個子組件：menu,content,header。按鈕在標題組件上。我想單擊按鈕然后選單應該切換。

頭檔案.ts

export class HeaderComponent implements OnInit {
  constructor(public service: SharedService) {}

  ngOnInit() {}

  toggleMenu() {
    this.service.flag = !this.service.flag;
    this.service.flagChange.emit(this.service.flag);
  }
}

header.html

<div>
  <a href="">
    <i class="fas fa-bars text-white barsIcon" ` (click)="toggleMenu()"></i>
  </a>
</div>

選單.ts

export class MenuComponent implements OnInit {
  constructor(public service: SharedService) {
    this.service.flagChange.subscribe((res) => this.service.flag);
  }

  ngOnInit() {}
}

選單.html

<div>
  <ul>
    <li>
      <a routerLink="/dashboard">Dashboard</a>
    </li>
    <li>
      <a routerLink="/user">User</a>
    </li>

    <li>
      <a routerLink="">Currency</a>
    </li>
    <li>
      <a routerLink="/report">Report</a>
      <ul>
        <li>
          <a routerLink="">Report1</a>
        </li>
        <li>
          <a routerLink="">Report2</a>
        </li>
        <li>
          <a routerLink="">Report3</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

服務.ts

@Injectable({
  providedIn: "root",
})
export class SharedService {
  public flag: boolean = false;
  public flagChange = new EventEmitter<boolean>();

  constructor() {}
}

uj5u.com熱心網友回復：

你不是那種票價，但你應該使用BehaviorSubject而不是EventEmitter為此目的
發射器用于@Output（）

這里有一些小改動。
我還重構了一點你的代碼；）

頭檔案.ts

export class HeaderComponent {
  constructor(public sharedService: SharedService) {}
}

header.html

<div>
  <a href="">
    <i class="fas fa-bars text-white barsIcon" (click)="sharedService.toggleMenu()"></i>
  </a>
</div>

選單.ts

export class MenuComponent implements OnInit, OnDestroy {
  protected _unsubscribe$: Subject<void> = new Subject();

  flag?: boolean

  constructor(private _sharedService: SharedService) {}

  ngOnInit() {
    this._sharedService.onFlagChange$
      .pipe(takeUntil(this._unsubscribe$))
      .subscribe((value) => {
        this.flag = value
      })
  }

  ngOnDestroy(): void {
    this._unsubscribe$.next();
    this._unsubscribe$.complete();
  }
}

選單.html

<div [class.hidden]="!flag"> <!-- or *ngIf, as you wish ;) -->
  <ul>
    <li>
      <a routerLink="/dashboard">Dashboard</a>
    </li>
    <li>
      <a routerLink="/user">User</a>
    </li>

    <li>
      <a routerLink="">Currency</a>
    </li>
    <li>
      <a routerLink="/report">Report</a>
      <ul>
        <li>
          <a routerLink="">Report1</a>
        </li>
        <li>
          <a routerLink="">Report2</a>
        </li>
        <li>
          <a routerLink="">Report3</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

服務.ts

@Injectable({
  providedIn: "root",
})
export class SharedService {
  public flag = false;
  onFlagChange$: BehaviorSubject<boolean> = new BehaviorSubject(this.flag);

  constructor() {}

  toggleMenu() {
    this.flag = !this.flag;
    this.onFlagChange$.next(this.flag); // Here, .next instead of .emit
  }
}

錯誤

1. 使用BehaviorSubject代替EventEmitter

優化

1. 總是退訂 observable！

重構

1. :boolean如果您已經為其添加了值，請不要宣告，這是隱含的。
2. 在內部移動切換邏輯service
3. ngOnInit不使用請勿宣告
4. 如果檔案private中沒有使用，則制作服務html

標籤：有角度的 标题 组件 切换 侧导航

上一篇：如何讓這個onclick轉到動態url？

下一篇：谷歌云計算引擎http連接超時