SelectedIndex не работает для вкладок материала mat-tab-nav-bar angular
Я написал код вкладок, как показано ниже
<nav mat-tab-nav-bar [selectedIndex] = "0">
<a mat-tab-link
*ngFor = "let link of navLinks; let i = index;"
[routerLink] = "link.path"
routerLinkActive #rla = "routerLinkActive"
[active] = "rla.isActive">
<div class = "link-tab-label">{{link.label}}</div>
<mat-icon class = "link-tab-close" (click) = "closeTab(i)">close</mat-icon>
</a>
</nav>
Когда я запускаю проект, у меня возникает проблема, показанная ниже.
compiler.js:485 Uncaught Error: Template parse errors:
Can't bind to 'selectedIndex' since it isn't a known property of 'nav'. ("
<mat-card>
<mat-card-content>
<nav mat-tab-nav-bar [ERROR ->][selectedIndex] = "0">
Как использовать selectedIndex с mat-tab-nav-bar?
@ Und3rTow Я хочу добиться ниже функциональности stackoverflow.com/questions/41937176/…. Но я использую mat-tab-nav-bar. Я не знаю, как установить декоратор ввода для selectedIndex.
тогда вы можете использовать <mat-tab-group>, который принимает selectedIndex, подробнее читайте в документы
Я хочу загрузить содержимое вкладки на основе URL-адреса, поэтому я использую mat-tab-nav-bar
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
mat-tab-nav-bar не имеет свойства selectedIndex, а mat-tab-link внутри mat-tab-nav-bar на самом деле не являются вкладками. mat-tab-nav-bar «предоставляет пользовательский интерфейс в виде вкладок для навигации между маршрутами». Чтобы установить активную «вкладку» или ссылку, вы устанавливаете активный маршрут через маршрутизатор вашего приложения. «Вкладка» отображается как активная с помощью директивы routerLinkActive и свойства active.
Привет. Не могли бы вы привести пример?
[active] = "rla.isActive", чтобы с этим свойством я мог вместо rla.isActive определить вкладку, которая должна быть активной по умолчанию после обновления или возврата с другого маршрута? это будет работать?
Да - active - это вход для директивы mat-tab-link для управления внешним видом. Если вы используете маршрутизацию, в примере показано, как привязать active к вашему маршрутизатору с помощью директивы routerLinkActive и переменной шаблона, чтобы «вкладка» выглядела активной, только если ее маршрут активен. Это предпочтительнее, чем самостоятельное управление состоянием, поскольку маршрутизатор уже отслеживает состояние.
Ошибка верна, если вы специально не настроили декоратор
@inputдля вашего компонентаnav.