从angular的其他组件中切换sidenav

Question

我想从Angular的另一个组件中切换一个sidenav。我有3个子组件:菜单，内容，头。按钮位于标题组件上。我想点击按钮，然后菜单应该切换。

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>

menu.ts

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

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

service.ts

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

Answer 1

你不是那样的人，但是你应该使用BehaviorSubject而不是EventEmitter来达到这个目的
发射器a意味着@Output()

这里有一些小变化。
我还重构了一些你的代码;)

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

menu.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();
}
}

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

service.ts

@Injectable({
providedIn: "root",
})
export class SharedService {
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. 始终取消订阅可观察对象!

重构

1. 如果你已经添加了一个值，不要声明:boolean，这是隐式的。
2. 移动service内的切换逻辑
3. 如果不使用ngOnInit，则不声明
4. 如果html文件中没有使用，则将服务设置为private