如何在 aurelia 自定义元素中呈现剃刀视图？

Question

在渲染正常的 aurelia 类时，我成功渲染了 mvc 视图，如下所示：

export class App {
  getViewStrategy() {
        return 'app';
    }
}

使用自定义元素时如何呈现剃刀视图可以使用一些服务器端代码来隐藏和显示一些元素。如果我只是跟随

<template>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
     ....
  </nav>
</template>

并在对应的nav-bar.ts中

import {bindable} from 'aurelia-framework';

export class NavBar {
    @bindable router;

    constructor() {

        console.info("Ctor");
    }

    bind() {
        console.info("bind");
    }

    getViewStrategy() {
        console.log('get view');
        return 'nav-bar'
    }
}

并像在我的 app.cshtml 中一样使用它。如果我从 =“nav-bar” 更改为 nav-bar.cshtml 并摆脱 nav-bar.ts 文件 aurelia 一直期望 nav-bar.js 因为它只关心 js 和 html 文件

<template>
    <require from="nav-bar"></require>
    <require from="bootstrap/css/bootstrap.css"></require>
    <nav-bar router.bind="router"></nav-bar>
    <div class="page-host">
        <router-view></router-view>
    </div>
</template>

在这种情况下，我的 Ctor 和绑定正在记录，但获取视图并不意味着我不能使用服务器端视图，或者有什么办法可以解决吗？

Answer 1

使用 @useView 装饰器。

navbar.js

import { useView } from 'aurelia-framework';

@useView('navbar.cshtml')
export class NavBarCustomElement {
    // ...
}

app.html

<require from="nav-bar"></require>
<nav-bar></nav-bar>
<div class="page-host">
    <router-view></router-view>
</div>

这里的工作示例：https://gist.run/?id=8f3b972d4008f07c1a11142b4b5b6e0e