在 Aurelia 中激活后设置页面标题

Question

我正在尝试设置标题，但是在下面的这段代码中，它在一个地方有效，在其他地方不起作用。我想获取产品名称并设置标题。还有其他方法吗？

activate(params: any, route, navigationInstruction) {       
        //route.navModel.router.title="test"; //works here
         this.api.pull<Product>([params.id]).then(items => {
                items.forEach(item=>
                {
                    if(item.id == params.id)
                        route.navModel.router.title = item.name //does NOT work here
                });

         });
    }

Answer 1

尝试return promise from api call，看起来页面标题是在activate hook之后设置的，所以你必须在[=11=之前设置route.navModel.router.title ] 钩子完成执行

activate(params: any, route, navigationInstruction) {       
    //route.navModel.router.title="test"; //works here
     return this.api.pull<Product>([params.id]).then(items => {
            items.forEach(item=>
            {
                if(item.id == params.id)
                    route.navModel.router.title = item.name //does NOT work here
            });

     });
}

Answer 2

尝试在 NavModel 上使用 setTitle 方法：

activate(params, routeConfig) {
  return this.api.pull<Product>([params.id]).then((items) => {
    let item = items.find((item) => item.id == params.id);
    if (item) {
        routeConfig.navModel.setTitle(item.name);
    }
  }
}

在上述情况下，您要下拉一个产品，然后将页面标题设置为该项目的名称。在此用例中，您可能希望设置 navModel 标题。但是，如果您真的想要更改Router标题而不仅仅是当前的导航模型，您可以执行以下操作：

import { inject, Router } from 'aurelia-framework';

@inject(Router)
export class MyViewModel

    constructor(router) {
        this.router = router;
    }

    activate(params, routeConfig) {
      return this.api.pull<Product>([params.id]).then((items) => {
        let item = items.find((item) => item.id == params.id);
        if (item) {
            this.router.title = item.name;
            this.router.updateTitle();
        }
      }
    }
}

在 Router docs 中查看更多信息。

在 Aurelia 中激活后设置页面标题

Setting page title after activation in Aurelia

router

config

page-title

aurelia