小编Som*_* S.的帖子

如何有条件地围绕ng-content包装div

取决于(布尔)类变量的值,我希望我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 {}
Run Code Online (Sandbox Code Playgroud)

angular-ng-if angular2-ngcontent angular

35
推荐指数
2
解决办法
1万
查看次数

@Self和@Host Angular 2+依赖注入装饰器之间的区别

请解释之间的差异@Self@Host.

角度API文档提供了一些想法.但我不清楚.提供的示例Self使用ReflectiveInjector例举使用.

然而,人们很少,如果有的话,用ReflectiveInjector在实际的应用程序代码(可能更多的测试)..你能给的,你会用一个例子@Self 来代替@Host这样的测试场景之外?

dependency-injection angular-decorator angular2-services angular

13
推荐指数
2
解决办法
7111
查看次数

将两个指令合并为一个指令

假设一个具有两个预定义的指令dir1dir2(由第三方的API,一个没有控制权提供).假设这些可以应用于html元素,如下所示:

<div dir1="red" [dir2]="123">... My Content ...</div>
Run Code Online (Sandbox Code Playgroud)

我发现自己在我的代码中的几个地方使用完全相同的绑定值应用上面的指令.而不是重复自己,我想创建我自己的自定义指令,称之为myDir,我可以像这样应用:

<div MyDir >... My Content ...</div>
Run Code Online (Sandbox Code Playgroud)

这应该与应用完全相同,dir1并且dir2与前面的例子一样,即它将具有值"red"123在其类中进行硬编码.

我已尝试设置主机绑定,如下面的plunker示例,但这不起作用..

我有一个想法是,如果只有打字稿有多重继承,那么我只是简单地写一个MyDir类的扩展名Dir1 Dir2 ..

我的问题是如何编写自定义指令(MyDir)来实现预期用途?

请帮助,谢谢!

https://plnkr.co/edit/W20Wvew326qsGfPU5H6v

typescript angular-directive angular

4
推荐指数
2
解决办法
1300
查看次数