Question

我已经确定了我的问题，我似乎无法解决这个问题。我从{wrap} bootstrap获得了一个主题，因为我是没有人的平面设计师，并根据导航骨架开始在Aurelia拼凑它。

我的问题是导航栏。使用骨架，路线在app.js中配置 - 很好，没问题 - 然后使用

<require from="nav-bar.html"></require>

将导航栏拉入一个页面。这会使CSS变形，因为正如F12告诉我的那样，在发出的HTML中添加了一个新元素作为导航栏组件的容器。在这种情况下，它是

<nav-bar class="au-target" router.bind="router" au-target-id="1">
<!-- usual bootstrap navbar stuff -->
</nav-bar>

我该如何解决这个问题？

Answer 1

使用Aurelia的@containerless装饰者：

要完成此任务，您需要使用Aurelia的@containerless装饰器。据我所知，你需要一个完整的组件，而不仅仅是一个HTML视图。如果你还没有nav-bar.js，那么创建一个没什么大不了的。

示例nav-bar.js：

import {containerless} from 'aurelia-framework';

@containerless
export class NavBar {
}

<强>用法：

首先，在父视图中需要您的视图nav-bar，就像这样。请确保不指定.html，因为您还希望它查找视图模型：

<require from="nav-bar"></require>

然后，在视图的正确位置向下，使用元素标记将其包含在内。

<nav-bar></nav-bar>

使用Compose元素的替代方法：

我从未使用过这个，但它也可能是一个很好的方法。根据Dwayne Charrington的this blog article，你也可以使用内置的Aurelia元素<compose>来导入无容器视图和/或没有视图模型的视图。它没有明确表示你可以做到这两点，所以我假设它会起作用。试一试，如果我需要更新这个答案帖子，请告诉我。

<compose view="nav-bar.html" containerless></compose>

Aurelia中的{wrap} bootstrap导航栏无法正常工作

1 个答案: