标签: ng-template

我想从树结构中生成一个反应形式.

以下是创建表单项(表单组和控件)的代码.对于嵌套在表单组中的控件,我使用递归模板.

import { Component, Input, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
  selector: 'form-item',
  template: `
    <ng-container [formGroup]="form">
      <ng-container *ngTemplateOutlet="formItemTemplate; context:{ $implicit: pathSegments }"></ng-container>

      <ng-template #formItemTemplate let-pathSegments>
        
        <ng-container *ngIf="pathSegments.length > 1">
          <div [formGroupName]="pathSegments[0]" class="form-group">
            <ng-container *ngTemplateOutlet="formItemTemplate; context:{ $implicit: pathSegments.slice(1) }"></ng-container>
          </div>
        </ng-container>

        <ng-container *ngIf="pathSegments.length === 1">
          <div class="form-control">
            <label>{{pathSegments[pathSegments.length - 1]}}</label>
            <!--<input type="text" [formControlName]="pathSegments[pathSegments.length - 1]"/>-->
            <input type="text"/>
          </div>
        </ng-container>
        
      </ng-template>
    </ng-container>
  `,
})
export …

我创建了一个结构指令，它根据 ng-template 中的内容显示工具提示，当我将鼠标悬停在文本“查看工具提示”上时，工具提示显示正确，但它显示在顶部：0px left: 0px position of在屏幕上，我希望它显示在文本“查看工具提示”的正上方，我已经使用“getBoundingClientRect()”方法实现了 elementRef 的尺寸，但我不知道如何在工具提示中应用它们。任何的想法？

tooltip.directive.ts

import { Component, Input, HostListener,  Directive, ElementRef, 
TemplateRef, ViewContainerRef,  ContentChild, ComponentRef } from 
'@angular/core';

@Directive({ selector: '[tooltipDirective]' })
export class TooltipDirective {
private tooltipId: string;
private dimensiones:{};
constructor(private elementRef: ElementRef,
          private viewContainerRef: ViewContainerRef) { }

@Input() parametroPlantilla: TemplateRef<any>;
@ContentChild( "tooltipTemplate" ) private tooltipTemplateRef: TemplateRef 
 <Object>;
@HostListener('mouseenter')  onMouseEnter(): void {    
this.viewContainerRef.createEmbeddedView(this.tooltipTemplateRef);
this.dimensiones = this.elementRef.nativeElement.getBoundingClientRect();   
}
@HostListener('mouseleave')  onMouseLeave(): void {        
 if (this.viewContainerRef) {
    this.viewContainerRef.clear();
  }  
 }  
}

display.component.ts

...Some stuff

<div tooltipDirective>See …

当一个组件在另一个组件内部时，它叫什么？像

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

它是如何工作的？

我正在使用内容投影将按钮放入组件中。

<hello name="{{ name }}">
  <button #btn>Click Me</button>
</hello>

和组件：

@Component({
  selector: 'hello',
  template: `
  <h3>Hello {{name}}!</h3>
  <ng-content></ng-content>
  `
})

到目前为止一切顺利……但是我现在想向该按钮添加一个（单击）事件侦听器，并且希望处理程序位于接收计划内容的组件中。

我希望执行以下操作以访问本机元素，然后添加单击侦听器。

@ViewChild('btn') btn

不幸的是，当我在ngAfterViewInit中控制台记录this.btn时，我得到了“未定义”。即使它确实起作用，我认为与访问本机元素相比，附加侦听器必须有更多角度的方法。

做到这一点的最佳方法是什么？

stackblitz示例：https ://stackblitz.com/edit/angular-cj4bz1 ? file = src%2Fapp%2Fhello.component.ts

我有一个函数，它从打字稿函数作为对象返回颜色、文本颜色和日期值。我想将它存储在一个 let 变量中。我可以直接使用该函数但不想复制函数的调用。

这给了我错误，如未找到“年份”

<kendo-grid-column-group title="{{year}}" [headerStyle]="{'text-align': 'center'}" width="380">
        <ul *ngFor="let month of keys(); let i = index">
          <li>
            <kendo-grid-column field="{{month}}" class="no-padding" title="{{month}}" [filterable]="false" [sortable]="false" width="35">
              <ng-template kendoGridCellTemplate let-dataItem let-color="getColor(year,i,dataItem.ca)">
                <span class="whole-cell" [ngStyle]="{'background-color': color.color,'color': color.textColor,'font-weight':'bold','height':'25px','vertical-align': 'middle'}">
                  <label>{{color.Date}}</label>
                </span>
              </ng-template>
            </kendo-grid-column>
          </li>
        </ul>
</kendo-grid-column-group>

所以我想知道是否有办法传递 ng-template 并生成它的所有内容以包含插值中使用的变量？

另外，我还是 angular 的新手，所以除了删除 html 元素之外，我还需要担心删除其他任何内容吗？

最后会有一个指向 stackblitz.com 存储库的链接，其中包含下面显示的所有代码。

以下是实现我的指令的 src/app/app.component.html 代码：

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<!-- popup/popup.directive.ts contains the code i used in button tag -->
<button PopupDir="" body="this is a hardcoded message that is passed to popup box"> simple 
</button>

<ng-template #Complicated="">
  <div style="background-color: red;">
    a little more complicated but simple and still doable
  </div>
</ng-template>
<button PopupDir="" [body]="Complicated">
  complicated
</button>

<ng-template #EvenMoreComplicated="">
  <!-- name and …

我有一个从我的一个组件传递的 ng-template，我有一个占位符来接受传递到我的组件上的 ng-template，如下面的 ngTemplateOutlet 所示。

<div>
<form novalidate #myForm="ngForm">
  <ng-container>
    <ng-template [ngTemplateOutlet]="myTemplate">
    </ng-template>
  </ng-container>
</form>
</div>

<!-- this template i am passing it from one of my other components -->
<ng-template #myTemplate>
  <input type="text" name="myInput" placeholder="Input"
    [(ngModel)]="inputModel" required/>
</ng-template>

这里的问题是我的 form('myForm') 忽略了传递的 ng-template 即使它被标记为需要。我如何确保我的 ngForm 考虑传递的 ng-template

我正在寻找一种在组件中的多个位置重复相同标记的方法。我知道我可以使用一个新组件，但我正在寻找一些不那么严重的东西。

html

        <nav class="pages">
            <ul class="inline">
                <li 
                    *ngFor="let p of pages; let i = index;"
                    [ngClass]="{'active': page.current_page == i+1}"
                    (click)="onPageChange(i+1, $event)"
                >{{i+1}}</li>
            </ul>
        </nav>

有没有一种方法可以ng-template在同一组件内的多个位置重复相同的标记...如下所示

<div id="header"> <ng-template [innHTML]="#pages"></ng-template> </div>
<div id="content">...</div>
<div id="footer"> <ng-template [innHTML]="#pages"></ng-template> </div>

<ng-container #pages>
    <ul class="inline">
        <li *ngFor="let p of pages; let i = index;" [ngClass]="{'active': page.current_page == i+1}" (click)="onPageChange(i+1, $event)">{{i+1}}</li>
    </ul>
</ng-container>

我还没有找到任何代码片段，而且文档太简洁了。所以我的问题是如何将 param 传递给 ng-template 以及如何取回索引？直觉上，以下应该有效，但它只是抛出“未定义”。任何帮助表示赞赏。

@ViewChild("vc", { read: ViewContainerRef }) vc: ViewContainerRef;
  @ViewChild("tpl") tpl: TemplateRef<any>;

  ngAfterViewInit() {
    this.vc.createEmbeddedView(this.tpl,
      new Book("The Complete Guide to Angular 4", 55));
    this.vc.createEmbeddedView(this.tpl,
      new Book("Building Web Components with TypeScript and Angular 4", 48));
  }
  deleteBook(index) {
    console.log("deleteBook index ", index);
  }

<div class="container">
    <div class="card-deck">
        <ng-container #vc></ng-container>
    </div>
    <ng-template #tpl let-book="book" let-index="index">
        <div class="card">
            <img class="card-img-top" src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Title: {{book.title}}</h4>
                <p class="card-text">Price: {{book.price}}</p>
                <button type="button" class="btn btn-primary" (click)="deleteBook(index)">Delete</button>

            </div>
        </div>
    </ng-template> …

这段代码工作正常（没有 ngTemplateOutlet）：

<mat-form-field [formGroup]="formGroup">
    <input matInput type="text"
        [formControlName]="fControlName"
    >
  <ng-container *ngIf="isShowErrors()" ngProjectAs="mat-error">
    <ng-container *ngFor="let error of showSMErrors" >
      <mat-error>{{ error.message }}</mat-error>
    </ng-container>
  </ng-container>
</mat-form-field>

但是这段代码无法正常工作（使用 ngTemplateOutlet），为什么？（就像普通的红色文本一样查看 error.message）：

<mat-form-field [formGroup]="formGroup">
    <input matInput type="text"
        [formControlName]="fControlName"
    >
  <ng-container *ngTemplateOutlet="showErrorsTemplate"></ng-container>
</mat-form-field>

<ng-template #showErrorsTemplate ngProjectAs="mat-error">
  <ng-container *ngIf="isShowErrors()" >
    <ng-container *ngFor="let error of showSMErrors" >
      <mat-error>{{ error.message }}</mat-error>
    </ng-container>
  </ng-container>
</ng-template>

有任何想法吗？谢谢！