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

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) {}
}

optional.component.html

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

optional.component.scss

.optional {
  font-weight: 300;
}