最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

你可以在 Angular Material 中看到此模式的范例：MatButton，MatTabNav，MatTable。

將容器用于原生元素

有時要使用的原生元素需要一個容器元素。比如，原生 ?? 元素不能有子元素，因此任何自定義的文本輸入組件都需要用其它元素來包裝 ??。盡管你可能只在自定義組件的模板中包含 ??，但這將使該組件的用戶無法為 ?input ?元素設(shè)置任意 Property 和 Attribute。相反，你可以創(chuàng)建一個使用內(nèi)容投影的容器組件，以將原生控件包含在組件的 API 中。

你可以把 MatFormField 作為該模式的例子。

案例研究：構(gòu)建自定義進度條

以下范例顯示如何通過使用宿主（host）綁定來控制與無障礙性相關(guān)的屬性（Attribute），來把進度條無障礙化。

• 該組件使用標準的 HTML 屬性（Attribute）?role ?和 ARIA 屬性（Attribute）來定義要啟用無障礙支持的元素。ARIA 屬性（Attribute）?aria-valuenow? 綁定到用戶的輸入。

import { Component, Input } from '@angular/core';

/**
 * Example progressbar component.
 */
@Component({
  selector: 'app-example-progressbar',
  template: '
',
  styleUrls: ['./progress-bar.component.css'],
  host: {
    // Sets the role for this component to "progressbar"
    role: 'progressbar',

    // Sets the minimum and maximum values for the progressbar role.
    'aria-valuemin': '0',
    'aria-valuemax': '100',

    // Binding that updates the current value of the progressbar.
    '[attr.aria-valuenow]': 'value',
  }
})
export class ExampleProgressbarComponent  {
  /** Current value of the progressbar. */
  @Input() value = 0;
}

• 在模板中，?aria-label? 屬性（Attribute）可以確保屏幕閱讀器能訪問該控件。

  Enter an example progress value
  

路由

導航后的焦點管理

在設(shè)計無障礙性時，在 UI 中跟蹤和控制焦點是很重要的考慮因素。使用 Angular 路由時，你需要確定頁面焦點在導航上的位置。

為了避免僅僅依靠視覺提示，你需要確保路由代碼會在頁面導航之后更新焦點。使用 ?Router ?服務(wù)中的 ?NavigationEnd ?事件可以知道何時該更新焦點。

以下范例顯示了導航后如何在 DOM 中查找并把焦點移動到主體內(nèi)容的頭部。

router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
  const mainHeader = document.querySelector('#main-content-header')
  if (mainHeader) {
    mainHeader.focus();
  }
});

在實際的應(yīng)用程序中，哪些元素獲得焦點將取決于該應(yīng)用特有的結(jié)構(gòu)和布局。獲得焦點的元素應(yīng)使用戶能夠立即移動到剛剛進入視野的主要內(nèi)容。你應(yīng)該避免當路由變化后焦點重新回到 ?body ?元素的情況。

活動鏈接標識

用在活躍 ?RouterLink ?元素上的 CSS 類（一般通過 ?RouterLinkActive ?來指定）提供了有關(guān)哪個鏈接正處于活躍狀態(tài)的視覺指示。此類指示不適用于盲人或視障用戶，為了提供此類信息，還要將 ?aria-current? 屬性應(yīng)用于此元素（有關(guān)更多信息，參閱MDN aria-current）。

?RouterLinkActive ?指令提供了 ?ariaCurrentWhenActive ?輸入屬性，該輸入屬性會在鏈接變?yōu)榛钴S狀態(tài)時將 ?aria-current? 設(shè)置為指定的值。

以下示例展示了如何將 ?active-page? 類應(yīng)用于活躍鏈接，以及如何在它們處于活躍狀態(tài)時將它們的 ?aria-current? 屬性設(shè)置為 ?"page"? ：