javascript - Angular 2，模板错误破坏了简单的网站

Question

我正在尝试修改 NG2 类(class)中的代码，以在 NG2 中制作动态 Spotify 播放器。当我添加<h1>anything</h1>时我在 app.component.js 中的模板可以正常工作。当我添加 + ` 时，代码给出了此错误

zone.min.js:1 Unhandled Promise rejection: Template parse errors:
'spotifyiframeplayer' is not a known element:
1. If 'spotifyiframeplayer' is an Angular component, then verify that it is part of this module.
2. If 'spotifyiframeplayer' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<h1>Spotify Iframe Player</h1>[ERROR ->]<spotifyiframeplayer></spotifyiframeplayer>"): AppComponent@0:30 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'spotifyiframeplayer' is not a known element:
1. If 'spotifyiframeplayer' is an Angular component, then verify that it is part of this module.
2. If 'spotifyiframeplayer' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<h1>Spotify Iframe Player</h1>[ERROR ->]<spotifyiframeplayer></spotifyiframeplayer>"): AppComponent@0:30
    at TemplateParser.parse (https://unpkg.com/@angular/compiler@2.0.0/bundles/compiler.umd.js:8530:21)
    at RuntimeCompiler._compileTemplate (https://unpkg.com/@angular/compiler@2.0.0/bundles/compiler.umd.js:16905:53)
    at https://unpkg.com/@angular/compiler@2.0.0/bundles/compiler.umd.js:16828:85
    at Set.forEach (native)
    at compile (https://unpkg.com/@angular/compiler@2.0.0/bundles/compiler.umd.js:16828:49)
    at e.invoke (https://unpkg.com/zone.js@0.6.21/dist/zone.min.js:1:15936)
    at n.run (https://unpkg.com/zone.js@0.6.21/dist/zone.min.js:1:13323)
    at https://unpkg.com/zone.js@0.6.21/dist/zone.min.js:1:11425
    at e.invokeTask (https://unpkg.com/zone.js@0.6.21/dist/zone.min.js:1:16565)
    at n.runTask (https://unpkg.com/zone.js@0.6.21/dist/zone.min.js:1:13925)o @ zone.min.js:1a @ zone.min.js:1a @ zone.min.js:1
zone.min.js:1 Error: Uncaught (in promise): Error: Template parse errors:(…)o @ zone.min.js:1a @ zone.min.js:1a @ zone.min.js:1

Link to Plunker我不知道如何修复这个错误。我已经检查过，该元素仅在示例代码中提及一次并且适用于该项目。

@galvon(这也在 plunker 上)

(function(app) {
  var Component = ng.core.Component;

  app.AppComponent = Component({
    selector: 'my-app',
    template:
      `
      <h1>Spotify Iframe Player</h1>
      <spotifyiframeplayer></spotifyiframeplayer>
      `
  })
  .Class({
    constructor: function AppComponent() { }
  });

})(window.app || (window.app = {}));

Answer 1

不要使用+附加字符串。

要使用多行 HTML，您可以使用反引号(在键盘中找到 - `)如下所示，

template:
      '<h1>Spotify Iframe Player</h1>' +
      '<spotifyiframeplayer></spotifyiframeplayer>'

更改为

template:
      `
      <h1>Spotify Iframe Player</h1>
      <spotifyiframeplayer></spotifyiframeplayer>
      `

注意:除此之外，您的 plunker 还不完整，因此即使进行此更改，也不要指望 plunker 能够运行，因为您没有 spotifyiframeplayer 组件实现。