webview - 如何在 Angular2 应用程序中使用 Electron 的 <webview>?

标签 webview angular attributes electron systemjs

我尝试使用 Electon's webview tag在我的 Angular2 应用程序中,但是当我添加绑定(bind)到 Angular2 变量的 src 属性时,会发生以下错误:

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>

如何将 webview 元素引入 Angular2?

最佳答案

如果出现这种情况,请在之前使用“attr”。

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

关于webview - 如何在 Angular2 应用程序中使用 Electron 的 <webview>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37793412/

相关文章:

javascript - 为什么 Angular 异步管道不适用于返回 Promise 的 getter

angular - 根据屏幕大小更改 md-grid-list 的布局或 cols 值

C# 属性 - 数组还是重复项?

jQuery : selector chain with attribute filter : result does not persist?

android - 未知的 URL 方案

Android WebView opening links in default browser - 在应用程序中打开链接

javascript - 如何编写简单的测试来检查 Angular 2 中 MatDialog 的行为?

c#-4.0 - C# 中可序列化方法中的 SecurityPermission

javascript - 在 webView 上加载本地存储的文件时出现延迟

android - 使用 Xamarin Forms 更新到 AppCompat 后 WebView 中的白色覆盖