相关疑难解决方法(0)

取决于(布尔)类变量的值,我希望我ng-content将其包装在div中或不包含在div中(即div甚至不应该在DOM中)...什么是最好的方法去对这个 ？我有一个尝试这样做的Plunker,在我认为是最明显的方式,使用ngIf ..但它不起作用...它只显示其中一个布尔值的内容,但不显示另一个

亲切的帮助谢谢!

http://plnkr.co/edit/omqLK0mKUIzqkkR3lQh8

@Component({
  selector: 'my-component',
  template: `

   <div *ngIf="insideRedDiv" style="display: inline; border: 1px red solid">
      <ng-content *ngIf="insideRedDiv"  ></ng-content> 
   </div>

   <ng-content *ngIf="!insideRedDiv"></ng-content>     

  `,
})
export class MyComponent {
  insideRedDiv: boolean = true;
}


@Component({
  template: `
    <my-component> ... "Here is the Content"  ... </my-component>
  `
})
export class App {}

我想ng-content在两个ngFor循环中显示两个不同的东西.但正如本回答所述,Angular不能多次投影ng-content.

我试过这个解决方案,但这不允许我多次投影我的内容,只是根据ngIf条件在不同的地方显示它.

这是我的实际代码:

示例父组件(使用app-table的任何组件).这就是我想要做的.

<app-table [data]="myData">
  <div lineHeader let-line>
    {{line.name}}
  </div>
  <div lineContent let-element>
    {{element.name}}
  </div>
</app-table>

子组件(app-table).在这里,我可以做任何事情,而父组件保持相同的工作方式.

<div *ngFor="let line of data">
  <ng-content select="[lineHeader]"></ng-content>
  <div *ngFor="let element of line">
    <ng-content select="[lineContent]"></ng-content>
  </div>
</div>

在我的 app.component.html 中，我想根据当前 url 呈现某些 div 容器。例如

1. 如果当前 URL 是身份验证，则呈现以下内容

<div *ngIf="'authenticate' === this.currentUrl">
    <router-outlet></router-outlet>
</div>

2. 如果当前 URL 未通过身份验证，则呈现以下内容

<div *ngIf="'authenticate' !== this.currentUrl" id="wrapper">
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="row extranet-outlet-wrapper">
                        <router-outlet></router-outlet>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我没有使用任何子路由。这是因为，我只想要一个不同的布局来验证组件，其余的保持不变。

这在首次加载时有效，但是当我单击任何[routerLink]视图时，视图不会更新。但是，如果我重新加载屏幕，它就可以工作。问题在于<router-outlet>in的条件渲染app.component.html，我通过删除条件来检查它，它工作得很好。

有人可以帮助我了解这里发生的事情以及如何在不使用子路由的情况下解决此问题。