标签: angular-template

我最近开始调查Angular 2.由于我主要使用C#,我缺少的一件事是Angular 2模板中的intellisense.我发现有一个某种类型的解决了这个问题在这里,但我不能找到一种方法,它集成到Visual Studio代码.我需要这个

有没有办法在Angular 2模板的Visual Studio代码中获取intellisense？

我正在尝试创建一个接受多个模板作为输入的组件.这是我的例子:

@Component({
    selector: 'data-list',
    styles: [
        require('./data-list.component.scss')
    ],
    template: `
        <ng-template
            *ngFor="let item of itemsData"
            ngFor let-item [ngForOf]="[item]" [ngForTemplate]="itemTemplate"
        ></ng-template>
    `
})

export class DataListComponent {
    @Input() itemsData: any[];
    @ContentChild(TemplateRef) itemTemplate: TemplateRef<ElementRef>;
}

正如你所看到的那样,这是一个我正在尝试的相当简单的组件.该组件只接受要显示的项目的数据以及项目的模板.这个组件可以像这样使用:

<data-list [itemsData]="data">
    <ng-template let-item>
        <h1>{{ item.header }}</h1>
        <div>{{ item.content }}</div>
    </ng-template>
</data-list>

如上图所示,我正在传递模板ng-content,然后由DataListComponentwith 读取@ContentChild(TemplateRef) itemTemplate: TemplateRef<ElementRef>;.

我的问题是是否可以将多个模板传递给组件.

作为示例,可以传递项目的模板,但是如果它是第一项,则需要不同的模板.这意味着将对第一个项目进行检查,DataListComponent然后使用组件使用它指定的模板.

简单的例子:

我可以做这样的事情来迎合这个:

@Component({
    selector: 'data-list',
    styles: [
        require('./data-list.component.scss')
    ],
    template: `
        <span *ngFor="let item of itemsData; let i = index" …

我3天前开始学习角度,所以我很陌生.我还使用angularJS和React开发应用程序,我想我不明白角度5组件是如何完全工作的.如果我创建一个自定义文本的自定义按钮(我不是说这应该以这种方式完成,但这是一个显示我的观点的简单示例),如下所示:

<app-button>
  <app-text>
    My Text
  </app-text>
</app-button>

渲染的DOM导致:

<app-button>
  <button>
    <app-text>
      <span>
        My Text
      </span>
    </app-text>
  </button>
</app-button>

这是不可读的,我想知道是否有办法删除这个包装元素,只是放置组件布局替换标签导致以下结构:

<button>
  <span>
    My Text
  </span>
</button>

如果没有办法删除它们你的建议是什么？谢谢!

目前,我练习角度4. 当普通用户查看此时显示公共内容当注册用户进入网页然后显示编辑或某些内容.如何最佳实践显示有条件的模板或一些Html内容示例:

<div *ngIf="isUser">
    some Content  here......
</div>
<div *ngIf="!isUser">
    some Content here .....
</div>

实际上,我想知道如何做到最好.

可以从变量中的字符串中评估模板吗？我需要将字符串放在组件中而不是表达式中,例如

template: "<div>{{ template_string }}</div>"

template_string包含:<b>{{ name }}</b>

所有人都应该被评估 <div><b>My Name</b></div>

但我知道 <div>{{ template_string }}</div>

我需要类似{{ template_string | eval }}或其他东西来评估当前上下文中变量的内容.

这是可能的？我需要使用这种方法,因为template_string可以在使用组件时进行更改.

EDIT1:

角度版本:4.0.3

例如

@Component({
  selector: 'product-item',
  template: `
    <div class="product">{{ template }}</div>`,
})
export class ProductItemComponent {
  @Input() name: string;
  @Input() price: number = 0;
  @Input() template: string = `{{ name }} <b>{{ price | currency }}</b>`;
}

用法:

<product-item [name]="product.name" [price]="product.price"></product-item>

预计: 产品名称USD3.00

输出: {{ name }} <b>{{ price | currency …

Angular 4 写的 Typescript 2.3.4

component.ts

/**
 * Info that drives the tabs in the template. Array is filled
 * in ngOnInit() once data is received from the server
 */
public tabs:Array<{
  title:string,
  description:string,
  data:Array<{name:string}>
}>=[];

component.html

<section *ngFor="let t of tabs">
  ...
  <div *ngFor="let i of t.data">{{i.name}}</div>
                                  ^^^^^^
</section>

编译错误

Angular:未定义标识符'name'.<anonymous>不包含这样的成员

起初我还以为这是链接到我的其他问题,但因为在形状没有歧义,这是不同的tabs模式:组件清楚地表明,name在各成员的属性data阵列本身的每个成员的属性tabs阵列.

这里发生了什么？

Angular的NgTemplateOutlet允许您将上下文传递给出口以进行属性绑定.

<ng-container *ngTemplateOutlet="eng; context: {$implicit: 'World'}"></ng-container>
<ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>

Angular *ngIf允许您根据布尔条件嵌入一个或另一个模板:

<ng-container *ngIf="isConditionTrue; then one else two"></ng-container>
<ng-template #one>This shows when condition is true</ng-template>
<ng-template #two>This shows when condition is false</ng-template>

如何将上下文传递给*ngIf语法中引用的这些模板？

我正在使用Angular Material v6.0带有复选框的 MatTreeModule (mat-tree)。但是我很难弄清楚如何确定哪些节点已被检查，哪些节点尚未被检查。在 Angular Material 的示例中，他们提供了非常好的源代码来设置它，我能够很好地设置它。

但是，我无法确定哪些复选框已被选中，哪些未选中。我已经尝试了几个小时试图解决这个问题，但没有运气。

我的目标是最终用户将选中或取消选中树中的复选框，从那里开始，我需要在他们做出选择后运行一些过程。

但是我完全陷入了试图找出哪些 mat-tree-nodes 被检查和未检查的问题，而且我在任何地方都找不到好的工作示例。

关键源代码在这里

可以在此处找到有关 mat-tree 的更多信息

任何人都可以帮助确定复选框是否已被选中？

谢谢。

根据请求，我在此处从两个代码文件中添加代码：

app/tree-checklist-example.ts app/tree-checklist-example.html

来自“app/tree-checklist-example.ts”的打字稿源代码

import {SelectionModel} from '@angular/cdk/collections';
import {FlatTreeControl} from '@angular/cdk/tree';
import {Component, Injectable} from '@angular/core';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
import {BehaviorSubject} from 'rxjs';

/**
 * Node for to-do item
 */
export class TodoItemNode {
  children: TodoItemNode[];
  item: string;
}

/** Flat to-do item node with expandable and level information */
export class TodoItemFlatNode …

我想重命名一个在角度模板文件（即xxx.component.html文件）中使用的变量。这可以通过WebStorm 中的Shift+F6快捷方式来完成。如何在 vscode 中做到这一点？F2没有帮助。

我试图在元素上定义模板变量并使用其隐藏属性来识别元素是否实际存在于DOM中,然后基于该元素显示另一个元素.但是如果有结构指令,模板变量似乎不会返回值.

<hr class="divider" *ngIf="true" #divi>
<div *ngIf="showResendWelcomeEmailButton">
  <a *wpHasAnyPermission="[{'something': true}]" 
     #resendEmailBtn>
    Resend Welcome Email
  </a>
</div>
<div class="pull-right">
  <a #editAccountBtn>Edit Account Details</a>
</div>

rbtn: {{resendEmailBtn?.hidden}}
ebtn: {{editAccountBtn?.hidden}}
dline: {{divi?.hidden}}

输出是

rbtn:
ebtn: false
dline: 

您可以在包含属性的元素上看到两个模板变量ngIf,wpHasAnyPermission但不返回值.

我想最终做的是使用resendEmailBtn与editAccountBtn在ngIf的hr决定显示了分频器.

解决这个问题的最佳方法是什么？我想避免处理组件代码.尝试用HTML解决这个问题.