如何从另一个页签启用物料页签
如何从另一个页签启用物料页签
提问于 2019-12-31 19:32:49
我的选项卡定义
this.tabLinks = [
{ label: 'NEW', link: 'crud' },
{ label: 'SEARCH', link: 'search' },
{
label: 'MEDIA',
link: 'media',
disabled: true,
},
];Tabs HTML
<nav mat-tab-nav-bar>
<a
mat-tab-link
*ngFor="let tabLink of tabLinks; let i = index"
[routerLink]="tabLink.link"
routerLinkActive
#rla="routerLinkActive"
[active]="rla.isActive"
[disabled]="tabLink.disabled"
>
{{ tabLink.label }}
</a>
</nav>最初，我的Media Tab是禁用的。如何从New tab内部启用我的Media Tab？
Stack Overflow用户
发布于 2019-12-31 19:59:00
如果您使用的是NGRX或NGXS之类的状态管理系统，那么我会将manage the enabled状态保留在那里，并提供一个允许更改状态的Action。
然后，在另一个选项卡中的某处，您可以将该Action激发到存储中以启用该状态。
如果未使用NGRX、NGXS或任何其他工具来管理状态，则可以创建包含一个或多个选项卡状态的服务，并在显示选项卡的组件和要启用选项卡的组件之间共享该服务。
@Injectable({providedIn: 'root'})
export class TabLinks {
private initialState = [
{ label: 'NEW', link: 'crud' },
{ label: 'SEARCH', link: 'search' },
{
label: 'MEDIA',
link: 'media',
disabled: true,
}];
private subject = new BehavourSubject(initialState);
tabLinks$ = this.subject.asObservable();
enableMediaTab() {
this.subject.next(
[...this.subject.value.map(x => x.link === "media" ? {...x, disabled: false} : x]
);
}
}现在您可以将其注入到您的Tabs页面中。使用async管道展开可观察对象。
<a
mat-tab-link
*ngFor="let tabLink of tabService.tabLinks$ | async; let i = index"
[routerLink]="tabLink.link"
routerLinkActive
#rla="routerLinkActive"
[active]="rla.isActive"
[disabled]="tabLink.disabled"
>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59543570
复制相关文章
相似问题
腾讯云开发者
