如何在aurelia自定义元素中渲染剃刀视图？

Question

在渲染普通aurelia类时，我成功渲染了mvc视图，如下所示：

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

我在使用自定义元素时如何渲染我的剃刀视图基本示例是我有一个nav-bar.html用于渲染我的菜单而不是nav-bar.html我想使用cshtml页面让我可以使用一些服务器端代码来隐藏和显示很少的元素。如果我只是关注

<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文件< / p>

<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和bind是日志记录，但获取视图并不意味着我无法使用服务器端视图或者有什么办法吗？

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