Question

我试图修改NG2课程中的代码，以便在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组件实现。

Angular 2，模板错误打破了简单的网站

1 个答案: