Question

我想要这个：

<div *ngIf="...">div 1...</div>
<div *ngIf="...">div 2...</div>
<div *ngIf="...">div 3...</div>

但我不想重复*ngIf，所以我使用此模板创建了我的组件<my-component>：

<div>div 1...</div>
<div>div 2...</div>
<div>div 3...</div>

我把* ngIf放在我的组件标签中：<my-component *ngIf="...">

问题是Angular 2将<my-component>标记放在DOM中，我不想要它。

对于任何了解ASP.NET WebForms的人，我希望Angular 2中的一个组件像<asp:PlaceHolder>一样工作...

Answer 1

对#include <iostream> using namespace std; int main() { int input = 0; short counter = 0; cout << "Hello fellow PC-User why don't you guess a number that is between 1-10 ?" << endl; cout << "Come on give it a try!\nOnly two conditions (maybe three) don't use the Number 5 and only Numbers 1-10!\nNow let's go!!!" << endl; cin >> input; if(input != 5 && input < 10){ while(input != 5 && input < 10) { ++counter; cout << "Nice you guessed " << counter << flush; if (input > 1){ cout <<" times!" << flush; } else{ cout << " time!" << flush; } cout << "\nNow go at it again just don't used the number the times u tried bro!" << endl; cin >> input; if(counter == 10){ cout << "Damn that motivation doe...well what can I say\n I give up \n U win." << endl; return 0; } else if(counter == input){ cout << "Don't do it..." << endl; return 0; } } } else { cout << "Yo! You weren't supposed to use that number!\nNow u looooose" << endl; } return 0; }标记使用等效的expanded *ngIf表示法：

template

Answer 2

要回答你的问题，你也可以这样做......

@Component({
  selector: '[my-component]'...

<my-component *ngIf="..."</my-component>

// becomes this in the dom

<div my-component _nghost...>

为此还有 ng-container 。

<ng-container *ngIf="something.is.there">
  <div class="here">
    Hello
  </div>
</ng-container>

// DOM: => <div class="here">Hello</div>

Answer 3

您只能通过使用CSS来解决此问题，只需将my-component设置为display: contents，

    my-component {
        display: contents;
    }

如display: contents documentation所述，这使得该组件看起来好像是该元素的父级的直接子级。

DOM中没有选择器标记的Angular 2组件

3 个答案: