為什么Angular會棄用舊的“替換”指令選項？

Question

在舊的Angular 1.x中，我們可以構建指令並有一個選項來設置“replace”：在配置中為true，這將允許您告訴Angular用您的指令所包含的任何內容替換整個DOM元素。

我是Angular 2+的新手，但到目前為止，我們似乎只有2個以相同方式構建組件的選項：

1）使用像<app-my-component></app-my-component>這樣的元素選擇器

2）使用屬性選擇器，如<div app-my-component></div>

問題是我發現這兩個問題：

使用方法＃1可以破壞CSS樣式，因為Angular會在頁面中放置一個額外的DOM元素，這意味着如果你有一個像<ul>和children <li>元素組成的HTML結構，你想要制作<li>元素一個可重用的組件，然后您生成的DOM如下所示：

<ul>
    <app-my-component>
        <li>Inner</li>
    </app-my-component>
</ul>

這將有效打破任何CSS目標ul > li 。

使用方法＃2允許我們修復CSS樣式問題，但是刪除組件應該提供的抽象，因為現在組件的使用者必須知道所需的元素類型：

<ul>
    <li app-my-component>
        Inner
    </li>
</ul>

在上述情況下，開發人員必須知道使用<li>才能使事情正常工作。 這是一個非常簡單的示例，但更復雜的情況對於開發人員來說可能不太直觀，從而導致頭痛。

看看這個例子。 由於底層HTML / CSS的性質，我必須設置這樣的2（主要/次要）組件，並使用內部<ng-content>來正確顯示導航。 正如您所看到的那樣，必須在父<div>粘貼<li>元素，看起來很奇怪，並且需要開發人員了解底層HTML。

<div app-platform-navigation-primary label="Test" icon="account_box" link="#">
    <li app-platform-navigation-secondary label="Test2" link="#"></li>
    <li app-platform-navigation-secondary label="Test3" link="#"></li>
    <li app-platform-navigation-secondary label="Test4" link="#"></li>
    <li app-platform-navigation-secondary label="Test5" link="#"></li>
</div>

摘要

總的來說，這兩種方法各有利弊，但我覺得如果我們仍然可以使用“替換”方法，我可以充分利用這兩種方法，這種方法允許你使用方法＃1開發，它提供了你需要的所有抽象，但不會在頁面上添加“額外”DOM元素，這將允許CSS繼續工作。

這樣做的弊端是什么導致Angular團隊取消了這些功能？ 是否有任何解決方案可以做到這一點我想做什么？

Answer 1

當開發人員想要使用您的組件時，他們必須查看您的文檔以查看選擇器的名稱。 那么指導開發人員使用<app-my-component> vs <li app-my-component>之間的區別是什么？ 請注意，組件選擇器支持CSS選擇器。 換句話說，您可以確保您的組件僅適用於<li>主機元素：

@Component({
  selector: 'li[app-my-component]'
  ...
})

使用如圖所示的嚴格選擇器，您可以指定元素和屬性，可以防止開發人員在預期用途之外使用您的組件。

對於您的示例用例：

@Component({
  selector: 'ul[app-platform-navigation-primary]'
  ...
})

和..

@Component({
  selector: 'li[app-platform-navigation-secondary]'
  ...
})

組件的主機元素不必是<div> 。 它可以是<ul> ， <li>或其他任何東西。

如果您希望抽象出組件在內部使用<ul>和<li>的事實，那么請看一下這個SO答案 。 這個答案演示了如何將每個子組件包裝在父組件中的<li> 。

總之，可以在AngularJs中獲得與沒有額外元素但不使用replace結果相同的結果。