相关疑难解决方法(0)

这是我的组件：

import { Component, OnInit, ContentChildren, QueryList } from '@angular/core';
import { IconBoxComponent } from '../icon-box/icon-box.component';

@Component({
  selector: 'app-three-icon-box',
  templateUrl: './three-icon-box.component.html',
  styleUrls: ['./three-icon-box.component.scss']
})
export class ThreeIconBoxComponent implements OnInit {
  @ContentChildren(IconBoxComponent) boxes: QueryList<IconBoxComponent>;

  constructor() { }

  ngOnInit() {
  }

  ngAfterContentInit() {
    console.log(this.boxes);
  }

}

它的模板如下所示：

<div class="row justify-content-center">
  <div class="col-12 col-md-10">
    <div class="row justify-content-center text-center">
      <div *ngFor="let box of boxes" class="col-12 col-sm-4 col-lg-3 offset-lg-1 lz-mb-2 lz-mb-sm-0">
        {{ box }}
      </div>
    </div>
  </div>
</div>

这就是我渲染它的方式：

  <app-three-icon-box>
    <app-icon-box icon="#icon-one">content 1</app-icon-box>
    <app-icon-box icon="#icon-two">content …

在ng-bootstrap 模态文档中,存在某种let-*属性的使用,这些属性似乎用于链接函数或事件以供以后使用.如果您查看示例顶部的(click)事件和let-c/ let-d属性,您可以了解它的作用.这似乎是Angular的一个功能,与此无关ng-bootstrap.

但是这叫什么呢？它有什么作用？此功能的Angular文档在哪里？

这是我所指的一个例子.看到第一行.

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <!-- content here omitted -->
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
  </div>
</ng-template>

我用谷歌搜索这无济于事; 我得到的唯一结果是关于let使用时的关键字ngFor,这显然是无关的.

 <p-dataTable [value]="services" [paginator]="true" expandableRows="true" rowExpandMode="single">
...</p-dataTable>

存在这样的一些

<ng-template let-col let-period="rowData" let-ri="rowIndex"   pTemplate="body">...</ng-template>

对于DataTable

我想在 .ts 文件中有一个模板字符串并将其添加到 NgTemplateOutlet。

我希望这会奏效，但没有。

<template [ngTemplateOutlet]="template" [ngOutletContext]="$implicit">

其中模板是范围内的字符串变量。所以我实现了这个，但是这也不能像我想要的那样工作。

import { Component, AfterViewInit } from '@angular/core';
import { ToastController } from 'ionic-angular';
import { ModalController } from 'ionic-angular';
import { DomSanitizer, SafeHtml} from '@angular/platform-browser';

@Component({
 selector: 'dynamic-report',
 templateUrl: 'dynamicReport.html',
})
export class DynamicReport implements AfterViewInit{
 private _template: string;
 context: any;

 public get template() : SafeHtml {
   return this.sanitizer.bypassSecurityTrustHtml(this._template);
 }

 constructor(public toastCtrl: ToastController, public modalCtrl:ModalController, private sanitizer: DomSanitizer) {
   this._template = "<button (click)='testFunction1('2')'>Click here 2!</button>";
   this.context = this;

 }

  testFunction1(message){
    console.log(message); …

我有一个递归的模板,类似于下面的内容:

<ng-container *ngTemplateOutlet="testTemplate; context: {$implicit:jsonObj1}">
</ng-container>

<ng-template #testTemplate let-Json1>
</ng-template>

它工作正常,我使用$ implicit发送jsonObj1,但我想发送两个参数,如果我尝试:

context: {$implicit:jsonObj1, $implicit:jsonObj2}

并尝试使用

<ng-template #filterTemplate let-Json1 let-json2>
</ng-template>

它不起作用,让我知道,如何传递两个参数.

我最近开始研究 Angular 4，在研究 primeNG 数据表时，我遇到了这样的语法let-col let-item="rowData"。我很困惑它在我的代码中做了什么，以及为什么我需要 2 个 let-*。谁能抽出时间来向我解释一下吗？

<p-dataTable [value]="employees" selectionMode="single" [(selection)]="selectedEmployee" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="10" [responsive]="true">
    <header>Employee Management Service</header>
    <p-column field="name" header="name" [sortable]="true">
     <ng-template let-col let-item="rowData">
       <label>some data</label>
     </ng-template>
    </p-column>
</p-dataTable>

我确实完成了Angular 2 模板中的 let-* 是什么？但这并没有消除我的疑虑。如果我执行 {{col}} 和 {{item}} 会发生什么。请指导。