Angular 2，模板錯誤破解簡單的網站

我試圖修改NG2課程的代碼，使NG2中的動態Spotify播放器。當我將<h1>anything</h1>添加到我的模板app.component.js中時，它可以工作。當我在+`的代碼添加給這個錯誤Angular 2，模板錯誤破解簡單的網站

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>"): [email protected]: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>"): [email protected]:30 
    at TemplateParser.parse (https://unpkg.com/@angular/[email protected]/bundles/compiler.umd.js:8530:21) 
    at RuntimeCompiler._compileTemplate (https://unpkg.com/@angular/[email protected]/bundles/compiler.umd.js:16905:53) 
    at https://unpkg.com/@angular/[email protected]/bundles/compiler.umd.js:16828:85 
    at Set.forEach (native) 
    at compile (https://unpkg.com/@angular/[email protected]/bundles/compiler.umd.js:16828:49) 
    at e.invoke (https://unpkg.com/[email protected]/dist/zone.min.js:1:15936) 
    at n.run (https://unpkg.com/[email protected]/dist/zone.min.js:1:13323) 
    at https://unpkg.com/[email protected]/dist/zone.min.js:1:11425 
    at e.invokeTask (https://unpkg.com/[email protected]/dist/zone.min.js:1:16565) 
    at n.runTask (https://unpkg.com/[email protected]/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 = {}));

來源

2016-09-26 drew4452862

請發佈您的模板，這是無效的（語法） – galvan

你在哪裏定義'spotifyiframeplayer'組件。你應該添加這個組件到''聲明'屬性的yout模塊 – yurzui

我會嘗試在app.component.js中聲明 – drew4452862

不使用+追加字符串。

使用多HTML，您可以使用反引號（發現你的鍵盤 - ` ）如下圖所示，

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

改變它

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

備註：除此之外，你的闖入者是不完整的，所以即使在此之後ge不要期望plunker運行，因爲你沒有spotifyiframeplayer組件實現。

來源

2016-09-26 19:08:21 micronyks

試圖讓它工作...似乎有同樣的問題。我加入了反蜱，並試圖複製\粘貼。似乎並沒有在plunker工作 – drew4452862

請閱讀我的提示文字 – micronyks

@micronyks爲什麼'+'不起作用（舊的方式）？ –

Angular 2，模板錯誤破解簡單的網站

回答

相關問題