Question

假设有一些Angular 2组件

SearchComponent
SearchResultComponent
DetailsComponent

SearchComponent允许用户输入条件，执行搜索（使用SearchService），并循环遍历结果，使用SearchResultComponent呈现每个结果。非常标准的东西。

SearchResultComponent呈现一些结果数据以及包含routerLink的锚标记，并将路径（例如/article/details/1234）配置为用DetailsComponent替换当前视图。

同样，这是典型的，并且按预期工作。

困境在于，基于用户设置（即用户个人资料），我希望SearchComponent能够呈现搜索表单并生成单个选项卡，然后每次单击详细信息链接对于给定结果，DetailsComponent的实例将在新选项卡中打开。或者，如果用户清除了配置文件设置，则最初描述的行为有效 - 单击锚链接会导致Angular 2 Routing替换当前视图。

我已经想出并通过https://stackoverflow.com/a/37945055/240372确认，DetailsComponent可以编码，以便处理从路由参数和属性/模型绑定参数加载。

我的猜测有时会在标签中呈现内容，有时会让Angular路由处理它。我的猜测是SearchComponent需要引用包含用户设置的ProfileComponent，以便它可以有条件地呈现标签。但是，如果SearchResultComponent正在呈现带有routerLink属性的锚标记，则父{4}}如何知道不允许路由启动？

相反，它需要以某种方式拦截该点击，抓取路由参数，创建一个新的选项卡，其中SearchComponent作为内容，同时将参数作为属性值传递。

在我看来，SearchResultComponent应该是无知，因为click事件的结果是在选项卡中呈现而不是替换当前视图。

添加代码段以澄清

如果我正在构建一个普通的DetailsComponent网站，我的“jquery”和“SearchComponent”输出可能会显示某些内容（不是真正的代码.. 。出于概念目的），比如

SearchResultComponent

现在处于非标签模式，当用户点击“开始阅读”链接时，该页面将离开当前页面。

但是，在标签模式下，输出几乎是相同的，除了“SearchComponent”输出的一些额外的东西。

<!-- rendered by Search Component -->
<div>
   <div class='searchForm'>
      <form>
        <input type="text" placeholder="Enter search terms or phase" />
        <input type="submit" />
      </form>
   </div>
   <div class='searchResults'>
      <ul>
         <!-- rendered by Search Results Component -- one li for each result -->
         <li>blah blah blah <a href='/details/27'>Go read 27</a>
         <li>blah blah blah <a href='/details/3'>Go read 3</a>
         <li>blah blah blah <a href='/details/43543'>Go read 43543</a>
         ...
      </ul>
   </div>
</div>

在这两种情况下，“ <div class="tabs"> <div class="tab"> <h3>Search Tab</h3> <div> <div class='searchForm'> <form> <input type="text" placeholder="Enter search terms or phase" /> <input type="submit" /> </form> </div> <div class='searchResults'> <ul>  <li>blah blah blah <a href='/details/27'>Go read 27</a> <li>blah blah blah <a href='/details/3'>Go read 3</a> <li>blah blah blah <a href='/details/43543'>Go read 43543</a> ... </ul> </div> </div> </div> </div> <script> $('.searchResults a').click(function (e) { e.preventDefault(); // so page does not navigate away // add new tab var tab = tabs.add(); // load content tab.loadContent($(this).attrib('href')); }); </script>”输出的元素是相同的，因为它不知道制表符与非制表符模式。它是父组件/模块/拦截click事件以最终创建选项卡并将将替换页面的内容放入选项卡式视图中。

等效 Angular 2标记类似于

SearchResultComponent

与之前一样， <searchComponent> <div class='searchForm'> <form> <input type="text" placeholder="Enter search terms or phase" /> <input type="submit" /> </form> </div> <div class='searchResults'> <ul> <searchResult *ngFor='let item of results' [result]='item'></searchResult>  <li>blah blah blah <a [routerLink]="['/details', result.id]">Go read 27</a> ... </ul> </div> </div>将了解制表符与非制表符模式并输出相应的模板。

和以前一样，SearchComponent需要执行 ng2等效监听SearchComponent的点击事件，以便拦截导航并将输出放入选项卡而不是替换当前视图。

Answer 1

我不确定我是否理解正确，但如果我这样做，你需要这样做：

onUserEvent()
{
  this.isLazyRender = ProfileService.IsLazyRender;
  if(isLazyRender){
     this.router.navigate(['/article/details/1234']);
  else{
     this.showDetailsComponent = true;
  }
}

如果您希望搜索结果对绑定无知，则应使用服务来处理数据

在选项卡和视图中使用Angular 2组件

1 个答案: