如何在Angular2應用中使用Electron的<webview>？

我嘗試使用Electon's webview tag我Angular2內部應用程序，但是當我添加綁定到一個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);

這是Angular2組件模板我（要）在使用網頁視圖：

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

如何將webview元素引入到Angular2中？

來源

2016-06-13 Sommereder

您能給出一個html的電子版本的代碼片段，以及如何運行它嗎？ –

我確實更新了我的問題詳細信息。 – Sommereder

如果出現這種情況，請使用「attr」。

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

來源

2016-06-14 10:10:38 Sommereder

這很奇怪。這聽起來像你可能有版本問題。您可以嘗試使用loadUrl api來查看是否有幫助。

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

來源

2016-06-13 15:24:42

我很確定，這會起作用，但webview必須成爲我的Angular2應用程序的一部分:-( – Sommereder

如何在Angular2應用中使用Electron的<webview>？

回答

相關問題