如何将"optional"文本附加到表单输入标签

Question

我是 Angular 2 的新手，并尝试附加文本以形成可选的输入。

像这样的东西(app-optional(：

<div class="form-group">
  <label app-optional>
    Name
    ... input here ...
  </label>
</div>

这应该导致：

名称 - 可选

我怎样才能做到这一点？或者你能建议一个更好的方法吗？

Answer 1

你可以

试试这个

<div class="form-group">
  <label>
    Name - <app-optional></app-optional>
  </label>
</div>

在应用程序可选组件的 html 中：

Optional

Answer 2

好吧，我设法用这样的<ng-content>解决了它：

<div class="form-group">
  <label app-optional>
    Name
    ... input here ...
  </label>
</div>

optional.component.ts

import { Component } from '@angular/core';
import { Translations } from '../../translations/translations';
@Component({
  selector: '[app-optional]',
  templateUrl: './optional.component.html',
  styleUrls: ['./optional.component.scss']
})
export class OptionalComponent {
  constructor(public T: Translations) {}
}

可选组件.html

<ng-content></ng-content>
<span class="optional"><em> - {{T.OPTIONAL}}</em></span>

optional.component.scss

.optional {
  font-weight: 300;
}