javascript - Angular 2。 Angular 日历事件单元详细信息模板

Question

我'使用[ Angular 日历]来自

github.com/mattlewis92/angular-calendar

.
我的目的是插入自己的模板作为事件的详细 View 。
我想达到与照片上类似的效果: final effect
到目前为止，我只实现了将自定义格式标记用作返回字符串。当我在 dom 中运行后输入一些 html input 标签时，它消失了。
这是我 plunker 如果您想了解或者您可能知道如何解决该问题。

提前致谢。

Answer 1

Angular 清理 HTML 中不受信任的值。如果您想显示输入，您应该使用DomSanitizer

import { DomSanitizer} from '@angular/platform-browser';

@Injectable()
export class CustomEventTitleFormatter extends CalendarEventTitleFormatter {
  constructor(@Inject(LOCALE_ID) private locale: string, private sanitizer: DomSanitizer) {
    super();
  }

  month(event: CalendarEvent): any {
    return this.sanitizer.bypassSecurityTrustHtml(`<form>
          First name: <input type="text" name="fname"><br>
                      <input type="submit" value="Submit">
              </form>`)
  }
  ...

<强> Plunker Example