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

假设有一些 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 可以编码，以便处理从路由参数和属性/模型绑定参数加载 .

我的 guess 有时会在标签中呈现内容，有时会让Angular路由处理它 . 我的猜测是 SearchComponent 需要引用包含用户设置的 ProfileComponent ，以便它可以有条件地呈现选项卡 . 但是如果 SearchResultComponent 正在渲染一个带有 routerLink 属性的锚标记，那么父 SearchComponent 如何知道 not 允许路由启动？

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

在我看来，SearchResultComponent应该是 ignorant ，单击事件的结果将在选项卡中呈现，而不是替换当前视图 .

Adding code snippets for clarification

如果我正在构建一个普通的旧 jquery 网站，我的“ SearchComponent " and " SearchResultComponent ”输出可能看起来像（不是真正的代码......只是出于概念目的）

<!-- 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>

现在处于 non-tabs 模式，当用户单击"Go read"链接时，页面将离开当前页面 .

但是，在 tabs 模式下，输出几乎是相同的，除了"SearchComponent"输出的一些额外的东西 .

<!-- rendered by Search Component -->
<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>
               <!-- 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>
</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>

在这两种情况下，“ SearchResultComponent ”输出的元素是相同的，因为它不知道制表符与非制表符模式 . 它是 parent 组件/模块/拦截click事件以最终创建选项卡并将已替换页面的内容放入选项卡式视图中的任何内容 .

equivalent Angular 2标记就像是

<!-- rendered by Search Component -->
<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>
         <!-- where SearchResultComponent would output the equivalent for each item in results array -->
         <li>blah blah blah <a [routerLink]="['/details', result.id]">Go read 27</a>
         ...
      </ul>
   </div>
</div>

像以前一样， SearchComponent 将了解制表符与非制表符模式并输出相应的模板 .

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