Question

我有两个组成部分。 过滤器和过滤器控制。我在 filter 组件中使用了 filter-control ：

<filter-control (pressEnter)="apply()" [options]="filter" 
[(ngModel)]="filters[filter.key]" (ngModelChange)="modelChange(filterGroup)">
</filter-control>

我在底部的某个地方实现了一个锚点：

<a type="button" class="btn btn-primary" (click)="apply()" data-toggle="collapse" href="#m{{tabId}}">
      Search
    </a>

默认情况下，

引导程序提供了 data-toggle =“ collapse” 功能以及 href 属性或 data-target 属性，该功能可以折叠一部分网页。我在锚标签中实现了这一点，如上所示。我也想在我的 filter-control 组件上实现这种折叠功能。有任何线索吗？

Answer 1

“输入”将成为您想要的。您需要在过滤器控件上有一个输入，可用于设置url数据。

但是，这一行令人困惑：

“现在，我也希望该锚标记中的数据切换和href也与filter-control标记关联（???）（???）。”

组件和标签上的属性和属性不只是通过将它们放在模板中来隐式关联。如果属性或属性不是元素固有的，则设置一个Input。而且，“ href”与您的任何自定义组件均无关，除非您创建输入以使其与之无关。

但是请注意，我可能不会在自定义组件上创建一个名为“ href”的属性。这是“ a”标记的本机属性，可能会引起一些混乱。我可能会称其为“ nav-url”或其他名称。但是据我所知，没有技术的理由，它不起作用。

如果需要有关“输入”的更多数据，只需搜索“ Angular Components中的输入”。

因此，在您的模板中：

....
<a href={{myInputName}} etc...>

和组件：

export class MyComponent (etc)...
@Input () myInputName;

您现在可以通过以下方式设置该值：

<MyComponent [myInputName]="whateverValueIWant"></MyComponent>

您可能正在尝试做类似这样的事情……不要。

<MyComponent><a href={{someVal}}>blah</a></MyComponent>

如果这就是您要尝试...停止。 “ a”标签属于该组件的模板，您可以通过输入绑定值。实际上，有一种方法可以做到这一点（或者至少以前是这样），但是为什么麻烦了，已经有一种非常简单的方法可以解决这个问题。

使用Angular组件时的href替代

1 个答案: