2016-06-13 7 views
0

私はAngular2アプリ内Electon's webview tagを使用しようとするが、私はAngular2変数にバインドさsrc属性を追加するとき、次のエラーが発生します。Angular2アプリ内でElectronの<webview>を使用するにはどうすればよいですか?

Can't bind to 'src' since it isn't a known native property 

これはindex.htmlにある:

<head> 
    <!-- cut out stylings, metatags, etc. --> 
    <script src="../node_modules/zone.js/dist/zone.js"></script> 
    <script src="../node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="../node_modules/systemjs/dist/system.src.js"></script> 
    <script src="systemjs.config.js"></script> 
    <script> 
     const electron = require('electron'); 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
</head> 
<body> 
    <MainComponent>Loading...</MainComponent> 
</body> 

これはsystemjs.config.jsです:

(function(global) { 
// map tells the System loader where to look for things 
var map = { 
    'app':      'angular', 
    '@angular':     '../node_modules/@angular', 
    'angular2-in-memory-web-api': '../node_modules/angular2-in-memory-web-api', 
    'rxjs':      '../node_modules/rxjs' 
}; 
// packages tells the System loader how to load when no filename and/or no extension 
var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { defaultExtension: 'js' } 
}; 
var ngPackageNames = [ 
    'common', 
    'compiler', 
    'core', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'router', 
    'router-deprecated', 
    'upgrade' 
]; 
// Add package entries for angular packages 
ngPackageNames.forEach(function(pkgName) { 
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' }; 
}); 
var config = { 
    map: map, 
    packages: packages 
}; 
System.config(config); 
})(this); 

これは私が中のWebViewを使用(したい)Angular2コンポーネントテンプレートです:

<div class="stage-component component"> 
    <webview *ngIf="iFrameUrl" src="{{iFrameUrl}}"></webview> 
</div> 

Angular2にwebview要素を導入するにはどうすればよいですか?

+0

HTMLの電子版とその実行方法のスニペットを教えてもらえますか? –

+0

質問の詳細を更新しました。 – Sommereder

答えて

0

これが表示された場合は、先に「attr」を使用してください。

<webview *ngIf="iFrameUrl" attr.src="{{iFrameUrl}}"></webview> 
0

これは奇妙です。おそらくバージョンの問題があるようです。代わりにloadUrl apiを使用して、それが役立つかどうかを確認することができます。

<script> 
    onload =() => { 
    const webview = document.getElementById('foo'); 
    webview.loadUrl('http://example.com') 
</script> 
+0

これはうまくいくはずですが、webviewはAngular2アプリの一部でなければなりません:-( – Sommereder