标签: angular-template

我有一个使用内容投影的组件。

<ng-content select="button">
</ng-content>

我想在我的组件中做这样的事情：

@ContentChild('button') button: ElementRef;

但是，当我检查时this.button，它undefined同时在ngAfterViewInit和 中ngAfterContentInit。

如果我的内容子元素是原生元素而不是自定义组件，我该如何选择它？

我使用角材料步进器。我需要在移动视图上设置填充 0。在开发人员控制台上，我可以通过更改.mat-horizontal-content-container. 但是当我添加时它不起作用.mat-horizontal-content-container{padding:0 !important;}这个问题有什么解决方案吗？

为什么要在 Angular 中的内置指令ngTemplateOutlet和ngComponentOutlet 上使用cdkPortal。它们不是都提供相同的功能吗？CDK 门户中是否有没有内置指令的特定功能？

它显示模板有错误，

错误：

• 属性“结果”是私有的，只能在“upperCaseComponent”类中访问
• 属性“mymessage”未在“upperCaseComponent”中声明

我的html

<input type="text" [(ngModel)]="mymessage"
<button (click)="clickMe()"> send</button>
<br><br>
<h1>{{result | json}}</h1>

我的组件.ts

import {Component} from "@angular/core";
export class MyComponent {
private result: any;
constructor()
}

我创建了一个可重用的组件来呈现表格。它目前适用于基本表格，但在某些情况下我希望能够自定义表格中的单个列/单元格。

这是我在父组件中使用的代码：

<!-- PARENT TEMPLATE -->
<app-table
  [headers]="headers"
  [keys]="keys"
  [rows]="rows">
</app-table>

// PARENT COMPONENT
public headers: string[] = ['First', 'Last', 'Score', 'Date'];
public keys: string[] = ['firstName', 'lastName', 'quizScore', 'quizDate'];
public rows: Quiz[] = [
  { 'John', 'Doe', 0.75, '2020-01-03T18:18:34.549Z' },
  { 'Jane', 'Doe', 0.85, '2020-01-03T18:19:14.893Z' }
];

我在子组件中使用的代码：

<!-- CHILD TEMPLATE -->
<table>
  <thead>
    <tr>
      <td *ngFor="let header of headers">
        {{ header }}
      </td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows">
      <td *ngFor="let key of keys">
        {{ render(key, …

我正在按照这个教程:https://thinkster.io/angulartutorial/angular-rails/,一切顺利,直到我必须在rails资源管道javascripts中安排我的角度代码和文件夹的部分,并使用宝石的角度-rails-template'(https://github.com/pitr/angular-rails-templates)来联系他们.

我已经通过Gemfile安装了gem,即使我在application.js中需要该文件,我也会收到"无法找到文件'angular-rails-templates'"错误:

//= require angular
//= require angular-rails-templates
//= require angular-ui-router
//= require_tree .

有什么建议？

如何使用Angular2管理一个包含未定义字段数的表单？

在我的情况下,我需要创建一个用户可以添加和删除一些文件块的地方.它就像一个地址簿,用户可以在其中添加一个或十个地址.每个地址都有一些字段,如街道,街道号码等.

我看起来像这样:

let address = fb.group({
        street: fb.control(null, Validators.required),
        streetNumber fb.control(null, Validators.required)
    });

this.userForm = fb.group({
        name: fb.control(null, Validators.required),
        firstName: fb.control(null, Validators.required),
        address: fb.group({
            1: address
            })
        });

我真的不知道如何在模板中管理它.

我试着在模板中写一些这样的东西,但很明显,它不起作用......

<form [ngFormModel]="userForm">
<input type="text" ngControl="name" #name="ngForm"/>
<input type="text" ngControl="firstName" #firstName="ngForm"/>

<div *ngFor="#address of userForm.controls['address'].controls">
    <input type="text" ngControl="street" #street="ngForm"/>
    <input type="text" ngControl="streetNumber" #streetNumber="ngForm"/>
</div>

编辑

为了更好的解释,我做了一个Plunker http://plnkr.co/edit/ffYe1479WnxYOQrbxwLF?p=preview

是否有可能写出可重用的ng-template？我的很多组件使用完全相同ng-template.
例如:

<kendo-grid>
    <kendo-grid-column field="group">
        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="form">
            <kendo-dropdownlist #listGroups [data]="groups"
                                textField="title"
                                valueField="id"
                                [valuePrimitive]="true"
                                [filterable]="true"
                                [formControl]="form.get('groupId')">
            </kendo-dropdownlist>
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

我不想在我的所有组件中重复这个模板和逻辑.我可以编写自定义组件并将此代码缩小为:

<kendo-grid>
    <kendo-grid-column field="group">
        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="form">
            <my-custom-component [formControl]="form.get('groupId')">
            </my-custom-component>
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

但我想做更多:

<kendo-grid>
    <kendo-grid-column field="group">
        <ng-template [ngTemplateOutlet]="templateFromAnotherSource">
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

我发现这个线程和这个描述ngTemplateOutlet,而不是如何共享多个组件之间的模板.

这是标签代码:

import {Directive} from '@angular/core';

@Directive({
  selector: '[ngbButtonLabel]',
  host:
      {'[class.btn]': 'true', '[class.active]': 'active', '[class.disabled]': 'disabled', '[class.focus]': 'focused'}
})
export class NgbButtonLabel {
  active: boolean;
  disabled: boolean;
  focused: boolean;
}

这是单选按钮代码:

import {Directive, forwardRef, Input, Renderer2, ElementRef, OnDestroy} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

import {NgbButtonLabel} from './label';

const NGB_RADIO_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => NgbRadioGroup),
  multi: true
};

let nextId = 0;

/**
 * Easily create Bootstrap-style radio buttons. A value of a selected button is bound …

我有Angular 5一个默认语言法语的应用程序.我必须添加需要更改全局布局的阿拉伯语(必须从右到左显示内容......).

我想知道是否有一种方法只使用一个组件并进行条件模板选择.例如 :

--my-compenent_ar.html
--my-compenent_fr.html
--my-component.ts

And in my @Component({
    moduleId: module.id,
    templateUrl: ==> condition here
    styleUrls: ['./sign-in.component.scss']
})
export class MyComponent

当前版本的Angular(5)本身不支持这种情况.

有什么好办法吗？

我想要做的是

--my-compenent_ar.html
--my-compenent_fr.html
--my-component.ts
--my-component.ar.ts

@Component({
    moduleId: module.id,
    templateUrl: './my-compenent_fr.html'
    styleUrls: ['./sign-in.component.scss']
})
export class MyComponent {
....
}

@Component({
    moduleId: module.id,
    templateUrl: './my-compenent_ar.html'
    styleUrls: ['./sign-in.component.scss']
})
export class MyComponentAR extends MyComponent {}

使用此配置,FR语言环境将导航到MyComponent并定位AR到MyComponentAR.

这很冗长.你有干净的方法吗？