как получить доступ к методу matTabNavBar.updateActiveLink - PullRequest
Новая
       18

как получить доступ к методу matTabNavBar.updateActiveLink

0 голосов
/ 08 ноября 2018

MatTabNav Docs показывает метод, который можно использовать для обновления активных ссылок для mat-tab-nav. Нет примеров того, как это реализовать, и исходный код не дает лучшего представления о том, как его реализовать.

Вот HTML из моего шаблона: 

<nav mat-tab-nav-bar #tabs>
  <a mat-tab-link *ngFor="let link of links"
    (click)="activelink = link.identifier"
    [active]="activelink === link.identifier"
    [routerLink]="[ './', link.identifier ]"
  >{{ link.title }}</a>
</nav>

Я попытался получить доступ к методу, используя следующие два примера, однако ни один из них не позволяет мне получить доступ к методу updateActiveLink в this.tabs.

Неудачная попытка 1 

@ViewChild( 'tabs' ) tabs: MatTabNav;

И неудачная попытка 2 

@ViewChild( 'MatTabNav' ) tabs: MatTabNav;

Что сбивает с толку, так это то, что он показывает, что мне нужно передать ссылку на элемент в элемент this.something.updateActiveLink( this.tabs ), поэтому я попытался импортировать MatTabNav в custructor и получить к нему доступ, например, _matTabNav.updateActiveLink( this.tabs )

constructor(
  private _matTabNav: MatTabNav,
) { }

Цель моей цели

Я намерен выделить первую из ссылок, когда маршрут не содержит мою вкладку. Также, когда маршрут меняется, я бы хотел, чтобы вкладки отражали это изменение. Таким образом, первая строка в итоге выберет тот же 

/route/
/route/tab1
/route/tab2
/route/tab3

И мои маршруты, которые направляются к одному и тому же компоненту 

{ component: MyTabComponent,       path: 'route/'     },
{ component: MyTabComponent,       path: 'route/:tab' },

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Вы можете получить элементы MatTabNav и MatTabLink, используя запросы @ViewCild и @ViewChildren, выполняя запросы к классам, а не к таким именам: 

@ViewChild(MatTabNav) matTabNav: MatTabNav;
@ViewChildren(MatTabLink) linkElements: QueryList<MatTabLink>;

Чтобы изменить выбор из кода, вам необходимо установить активное значение false для текущей выбранной ссылки и значение true для той, которую вы выбираете. После этого вызовите метод updateActiveLink. ElementRef для передачи - это элемент ref вновь выбранного MatTabLink. Вот пример метода, который выбирает вторую ссылку для демонстрации: 

selectSecondLink() {
  const matTabLinks: MatTabLink[] = this.linkElements.toArray()
  matTabLinks[0].active = false;
  matTabLinks[1].active = true;
  this.matTabNav.updateActiveLink(matTabLinks[1]._elementRef);
}

Здесь также ссылка на рабочий образец в StackBlitz.

Для того, чтобы все это работало, вам также необходимо удалить привязку на [active]. Если вы используете привязку, то нет необходимости делать все это, вы просто устанавливаете свойство activeLink для идентификатора ссылки, которую хотите выбрать, и она будет обновляться автоматически. Например, как это: 

changeSelection() {
  this.activeLink = this.links[1].identifier;
}

Вот ссылка на образец, который делает это. Вы не можете смешивать оба подхода, потому что привязка переопределит то, что вы делаете из кода.

0 голосов
/ 08 ноября 2018

Не уверен, что это будет полезно, так как у меня нет примера stackblitz с настройкой маршрутов, чтобы протестировать его дальше, но вот как я получил доступ к методу, используя пример панели навигации по вкладкам здесь tab-nav-bar -базисный-example.ts

Метод доступен через mat-tab-nav-bar, как показано ниже.

Добавить templateRef 

<nav #navBar mat-tab-nav-bar [backgroundColor]="background">

Затем настройте ViewChild, используя ref 

@ViewChild('navBar') _navBar:any

Тогда console.log(this._navBar.updateActiveLink); приводит к следующему выводу. 

ƒ (element) {
        // Note: keeping the `element` for backwards-compat, but isn't being used for anything.
        // @breaking-change 8.0.0
        this._activeLinkChanged = !!element;
        this…

Отсюда я подозреваю, что вам нужно будет передать elementRef mat-tab-link, так как этот метод в источнике появляется для обновления закрытой переменной _activeLinkChanged и запуска обнаружения изменений.

Если посмотреть в другом месте исходного кода, кажется, что эта переменная будет выполнять такие действия, как выравнивание чернильницы по вкладке, для которой активная ссылка была изменена ... поскольку у меня нет стекабликации установки, я не могу проверить ни одну из этих частей для вас, и анализ полностью основан на обзоре исходного кода ... надеюсь, что некоторые из этого анализа будут полезны. 

/** Checks if the active link has been changed and, if so, will update the ink bar. */
  ngAfterContentChecked(): void {
    if (this._activeLinkChanged) {
      const activeTab = this._tabLinks.find(tab => tab.active);

      this._activeLinkElement = activeTab ? activeTab._elementRef : null;
      this._alignInkBar();
      this._activeLinkChanged = false;
    }
  }
...