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

尝试使用setTitle上的NavModel方法：

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标题而不仅仅是当前的navModel，则可以执行以下操作：

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中的更多信息。

Answer 2

尝试从api调用返回promise，看起来页面标题是在activate挂钩之后设置的，所以你必须在route.navModel.router.title挂钩完成执行之前设置activate

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
            });

     });
}

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

2 个答案: