如何在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>？

回答

相关问题