标签: angular-template

Angular 5在某些类中添加了"ng-star-inserted" - 这是什么?

我看到在添加到元素中的类中,有时会添加这个'ng-star-inserted',我想知道它为什么存在?

javascript css angular-template angular

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

如何以及在何处使用:: ng-deep?

我是Angular 4的新手,所以有人可以解释::ng-deepAngular 4中的使用方法和位置吗?

实际上我想从父组件覆盖子组件的一些CSS属性.IE11还支持吗?

css angular-template angular

46
推荐指数
4
解决办法
6万
查看次数

将父范围值传递到Angular中的ng-repeat循环

这应该是一个非常简单的问题,但我发现的所有变通方法都很复杂.我在模板中使用ng-repeat循环遍历一组对象,如下所示:

<div class="row-fluid" ng-repeat="message in messages.current|filter:'draft'"> 
    {{ message.subject }} ... {{ campaign.name }} ...
</div>
Run Code Online (Sandbox Code Playgroud)

由于ng-repeat创建了一个新范围,因此来自控制器的"campaign"对象似乎不可访问.是否有任何方法(除了将运动对象添加到我的数组中的每个项目)获得该值?

提前致谢.

javascript angularjs angular-template

45
推荐指数
1
解决办法
6万
查看次数

加载相对templateUrl

我一直在努力寻找创建模块化,可扩展角度应用程序的最佳方法.我非常喜欢angular-boilerplate,angular-app等项目的结构,其中所有相关文件按部分和指令的特征组合在一起.

project
|-- partial
|   |-- partial.js
|   |-- partial.html
|   |-- partial.css
|   |-- partial.spec.js
Run Code Online (Sandbox Code Playgroud)

但是,在所有这些示例中,模板URL相对于基本URL加载,而不是相对于当前文件:

angular.module('account', [])
.config(function($stateProvider) {
  $stateProvider.state('account', {
    url: '/account',
    templateUrl: 'main/account/account.tpl.html', // this is not very modular
    controller: 'AccountCtrl',
  });
})
Run Code Online (Sandbox Code Playgroud)

这不是非常模块化的,并且可能难以在大型项目中维护.templateUrl每次移动任何这些模块时,我都需要记住改变路径.如果有一些方法可以相对于当前文件加载模板,那将是很好的,如:

templateUrl: './account.tpl.html'
Run Code Online (Sandbox Code Playgroud)

有没有办法在角度做这样的事情?

angularjs angularjs-directive angular-template angular-ui-router

42
推荐指数
2
解决办法
5万
查看次数

获取父组件中子组件的引用

在Angular 2中,我有一个包含子组件的组件.但是,我想获取要在父级中使用的子组件的副本,以调用其函数或其他任何内容.

我发现我可以使用局部变量,这样我就可以在模板中使用该组件.但是,我不要只在模板中使用它,我想在组件的实际代码中使用它.

我找到了一种方法,这里是子代码:

//our child
import {Component, OnInit, EventEmitter} from 'angular2/core'

@Component({
  selector: 'my-child',
  providers: [],
  template: `
    <div>
      <h2>Child</h2>

    </div>
  `,
  directives: [],
  outputs: ['onInitialized']
})

export class Child implements OnInit{

  onInitialized = new EventEmitter<Child>();

  constructor() {
    this.name = 'Angular2'
  }

  ngOnInit() {
    this.onInitialized.emit(this);
  }
}
Run Code Online (Sandbox Code Playgroud)

家长:

//our root app component
import {Component} from 'angular2/core'
import {Child} from './child'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <my-child (onInitialized)="func($event)"></my-child>
    </div>
  `,
  directives: [Child]
})
export class …
Run Code Online (Sandbox Code Playgroud)

typescript angular-template angular

41
推荐指数
3
解决办法
8万
查看次数

Angular - ng-template,其中ngIf内的参数位于ngFor内

我正在尝试构建此模板:

<ul>
    <li *ngFor='let link of links'>
        <ng-container *ngIf="link.type == 'complex'; then complexLink else simpleLink"></ng-container>
    </li>
</ul>

<ng-template #simpleLink>
    ...
    {{ link.some_property }}
</ng-template>

<ng-template #complexLink>
    ...
    {{ link.some_property }}
</ng-template>
Run Code Online (Sandbox Code Playgroud)

问题是在ng-template中未定义链接变量,因此我得到访问未定义的'some_property'的错误.

我很想知道如何将链接变量从ngFor传递到ng-template

很高兴知道这个问题是否有多种解决方案.

angular-template ng-template angular

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

如何使用带有*ngFor的Angular2模板从嵌套数组中创建表?

给定组件属性中的以下数组groups:

[
   {
     "name": "pencils",
     "items": ["red pencil","blue pencil","yellow pencil"]
   },
   {
     "name": "rubbers",
     "items": ["big rubber","small rubber"]
   },
]
Run Code Online (Sandbox Code Playgroud)

如何创建一个包含所有项目的html表,每个项目都在一行中?预期的HTML结果:

<table>
    <tr><td><h1>pencils</h1></td></tr>
    <tr><td>red pencil</td></tr>
    <tr><td>blue pencil</td></tr>
    <tr><td>yellow pencil</td></tr>
    <tr><td><h1>rubbers</h1></td></tr>
    <tr><td>big rubber</td></tr>
    <tr><td>small rubber</td></tr>
</table>
Run Code Online (Sandbox Code Playgroud)

第一级很容易:

<table>
    <tr *ngFor="#group of groups">
        <td><h1>{{group.name}}</h1></td>
    </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

但现在我必须迭代#item of group.问题是我需要在定义<tr>元素之后的新元素,而不是在里面.</tr>group

在Angular2模板中有没有解决这类问题的方法?我期待一些特殊的标签,我可以使用而<tr>不是写入dom.与JSF中的facet和片段类似的东西.

angular-template angular2-template angular

25
推荐指数
4
解决办法
9万
查看次数

如何设置ng-content的样式

我正在遵循本教程中的转换https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

但是,没有提到如何设置最终替换ng-content的元素.

似乎我只能在css中定位那些元素,如果前面有/deep/关键字,通常在定位嵌套组件时使用.它是否正确?

angular-template angular

23
推荐指数
3
解决办法
2万
查看次数

角度模板后捕获页面源(HTML快照)

快速angular.js问题......

如果我有一个包含以下内容的网页:

<div>{{message}}</div>
Run Code Online (Sandbox Code Playgroud)

我为'消息'设置了模型

$scope.message = "Hello world!"
Run Code Online (Sandbox Code Playgroud)

然后在屏幕上,div的内容将显示为

Hello world!
Run Code Online (Sandbox Code Playgroud)

但是,如果我在Chrome或Firefox中查看来源,源代码仍然如此

<div>{{message}}</div>
Run Code Online (Sandbox Code Playgroud)

有没有办法在Angular模板后捕获页面的源,所以当我查看源代码时,我看到了

<div>Hello world!</div>
Run Code Online (Sandbox Code Playgroud)

例如,如果我正在处理一个项目,我正在使用Angular来帮助我进行模板操作,但是客户端希望HTML中的最终页面没有角度,那么在模板应用到后,我怎样才能捕获页面的HTML给这个客户?

angularjs angular-template

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

如何只用ng-container创建一个if-else Angular模板?

我想在我的角度模板中做一个if-else语句.我从那开始:

<ng-container *ngIf="contributeur.deb; else newDeb" >
    [... HERE IS A RESULT 1]
</ng-container>
<ng-template #newDeb>
    [... HERE IS A RESULT 2]
</ng-template>
Run Code Online (Sandbox Code Playgroud)

我试图只使用ng-container:

<ng-container *ngIf="contributeur.deb; else newDeb" >
    [... HERE IS A RESULT 1]
</ng-container>
<ng-container #newDeb>
    [... HERE IS A RESULT 2]
</ng-container >
Run Code Online (Sandbox Code Playgroud)

不幸的是,这不起作用.我有这个错误:

ERROR TypeError: templateRef.createEmbeddedView is not a function
    at ViewContainerRef_.createEmbeddedView (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:10200:52)
    at NgIf._updateView (eval at <anonymous> (vendor.bundle.js:96), <anonymous>:2013:45)
    at NgIf.set [as ngIfElse] (eval at <anonymous> (vendor.bundle.js:96), <anonymous>:1988:18)
    at updateProp (eval at …
Run Code Online (Sandbox Code Playgroud)

if-statement angular-template angular

19
推荐指数
3
解决办法
2万
查看次数