如何附加“可选”文本以形成输入标签

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>

在app-optional组件的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) {}
}

optional.component.html

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

optional.component.scss

.optional {
  font-weight: 300;
}