填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

設定文件標題

Set the document title

你的應用應該能讓瀏覽器標題欄顯示你想讓它顯示的內容。本文會解釋怎麼做。

Your app should be able to make the browser title bar say whatever you want it to say. This cookbook explains how to do it.

參閱現場演練 / 下載範例

See the現場演練 / 下載範例.

<title>的問題

The problem with <title>

顯而易見的方法是把元件的屬性繫結到 HTML 的 <title> 標籤上,像這樣:

The obvious approach is to bind a property of the component to the HTML <title> like this:

      
      <title>{{This_Does_Not_Work}}</title>
    

抱歉,這樣不行。應用程式的根元件是一個包含在 <body> 標籤裡的元素。該 HTML 的 <title> 在文件的 <head> 元素裡,在 <body> 之外,Angular 的資料繫結無法訪問到它。

Sorry but that won't work. The root component of the application is an element contained within the <body> tag. The HTML <title> is in the document <head>, outside the body, making it inaccessible to Angular data binding.

可以從瀏覽器獲得 document 物件,並且手動設定標題。但是這樣看起來很髒,而且將無法在瀏覽器之外執行應用程式。

You could grab the browser document object and set the title manually. That's dirty and undermines your chances of running the app outside of a browser someday.

在瀏覽器外執行應用程式意味著:利用伺服器端預先渲染,為應用程式實現幾乎即時的首次渲染,同時還能支援 SEO(搜尋引擎優化)。 意味著你可以在一個 Web Worker 中執行你的應用程式,透過多執行緒技術增強應用程式的響應性。 還意味著你可以在 Electron.js 或者 Windows Universal 裡面執行,發佈到桌面環境。

Running your app outside a browser means that you can take advantage of server-side pre-rendering for near-instant first app render times and for SEO. It means you could run from inside a Web Worker to improve your app's responsiveness by using multiple threads. And it means that you could run your app inside Electron.js or Windows Universal to deliver it to the desktop.

使用 Title 服務

Use the Title service

幸運的是,Angular 在瀏覽器平臺的套件中,提供了一個 Title 服務,彌補了這種差異。 Title服務是一個簡單的類別,提供了一個 API,用來獲取和設定當前 HTML 文件的標題。

Fortunately, Angular bridges the gap by providing a Title service as part of the Browser platform. The Title service is a simple class that provides an API for getting and setting the current HTML document title:

  • getTitle(): string —— 獲取當前 HTML 文件的標題。

    getTitle() : string—Gets the title of the current HTML document.

  • setTitle( newTitle: string) —— 設定當前 HTML 文件的標題。

    setTitle( newTitle : string )—Sets the title of the current HTML document.

你可以把 Title 服務注入到根元件 AppComponent,並暴露出可供繫結的 setTitle 方法讓別人來呼叫該服務:

You can inject the Title service into the root AppComponent and expose a bindable setTitle method that calls it:

src/app/app.component.ts (class)
      
      export class AppComponent {
  public constructor(private titleService: Title) { }

  public setTitle(newTitle: string) {
    this.titleService.setTitle(newTitle);
  }
}
    

把這個方法繫結到三個 A 標籤,瞧瞧!

Bind that method to three anchor tags and voilà!

這裡是完整的方案(程式碼)。

Here's the complete solution:

      
      import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);
    

為什麼要在 bootstrap 裡面提供這個 Title 服務

Why provide the Title service in bootstrap

你通常會在應用程式的根元件 AppComponent 中提供應用程式級的服務。

Generally you want to provide application-wide services in the root application component, AppComponent.

但這裡,要在引導過程中註冊這個 Title 服務,這個位置是為你設定 Angular 執行環境而保留的。

This cookbook recommends registering the title service during bootstrapping, a location you reserve for configuring the runtime Angular environment.

你的做法正是如此。這裡的 Title 服務是 Angular瀏覽器平臺的一部分。如果在其它平臺上引導應用程式,就得提供另一個專為那個平臺準備的 Title 服務。

That's exactly what you're doing. The Title service is part of the Angular browser platform. If you bootstrap your application into a different platform, you'll have to provide a different Title service that understands the concept of a "document title" for that specific platform. Ideally, the application itself neither knows nor cares about the runtime environment.