Angular和X3D集成:奇怪的行为 [英] Angular and X3D integration: strange behaviour
问题描述
我发现插入Angular(第4版)组件的x3d的某些行为，我认为这确实很奇怪.
I have found some behaviour of an x3d inserted in an Angular (version 4) component which I think is really strange.
我创建了一个具有以下结构的Angular项目:
I have created an Angular project with the following structure:
x3d_and_angular/
app/
home/
home.component.css
home.component.html
home.component.ts
index.ts
viewer/
viewer.component.css
viewer.component.html
viewer.component.ts
index.ts
app.component.html
app.component.ts
app.module.ts
app.routing.ts
main.ts
app.css
index.html
package.json
red_box.x3d
sysytemjs.config.js
我在 package.json 和 sysytemjs.config.js 中添加了 x3dom 库.
我的 index.html 看起来像这样:
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>X3D and Angular Integration</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap css -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'>
<!-- application css -->
<link href="app.css" rel="stylesheet" />
<!-- polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
<script>
function show_inline_url(){
console.log(document.getElementById("inline_element"));
}
</script>
</head>
<body>
<app>Loading ...</app>
</body>
</html>
显示我要渲染的红色小框的X3D文件( red_box.x3d )是:
The X3D file (red_box.x3d) showing the small red box that I want to render is:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.3//EN" "http://www.web3d.org/specifications/x3d-3.3.dtd">
<x3d>
<head>
<meta name="title"/>
</head>
<Scene>
<Shape id="shape_id">
<appearance>
<material diffuseColor='1 0 0'></material>
</appearance>
<box></box>
</Shape>
</Scene>
</x3d>
home 组件的代码如下:
-
home.component.html:
<div>
<a [routerLink]="['/viewer']">X3D Viewer</a>
</div>
home.component.ts :
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
templateUrl: 'home.component.html',
styleUrls: ['home.component.css'],
})
export class HomeComponent{
constructor() { }
}
问题出现在 viewer 组件中.组成该组件的文件的代码如下:
The problem arises in the viewer component. The code of the files which form this component is the following:
-
viewer.component.html:
<div>
<x3d width='600px' height='400px'>
<scene>
<inline id="inline_element" [url]="x3d_filename"> </inline>
</scene>
<a [routerLink]="['/']"><span>BACK</span></a>
</x3d>
</div>
viewer.component.ts :
import { Component, OnInit } from '@angular/core';
declare var System: any;
@Component({
moduleId: module.id,
templateUrl: 'viewer.component.html',
styleUrls: ['viewer.component.css'],
})
export class ViewerComponent implements OnInit{
x3d_filename: string = "red_box.x3d";
constructor() {
this.importX3d();
}
ngOnInit(){
if(window["x3dom"] != undefined){
window["x3dom"].reload();
}
}
importX3d():void{
System.import('x3dom').then(() => {
console.log('loaded x3d');
}).catch((e:any) => {
console.warn(e);
})
}
}
我的Angular应用程序通过路由从组件 home 到组件 viewer ，反之亦然.路由在文件 app.routing.ts :
My Angular application goes from component home to component viewer, and viceversa, via routing. The routes are defined in the file app.routing.ts:
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/index';
import { ViewerComponent } from './viewer/index';
const appRoutes: Routes = [
{ path: '', component: HomeComponent},
{ path: 'viewer', component: ViewerComponent},
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
export const routing = RouterModule.forRoot(appRoutes);
我注意到一些非常奇怪的事情.每次刷新网站时，即第一次访问组件 viewer 时，场景都是空的.但是，随后通过路由(无需刷新)访问此组件的时间，该框将呈现在场景内.
I noticed something really strange. Every time that I refresh the website, the first time that I access the component viewer, the scene is empty. However, the subsequent times that I access this component via routing (without refreshing), the box is rendered inside the scene.
但是，如果我将 viewer.component.html 文件中的 inline 标记替换为< inline url ="red_box.x3d"></inline> ，这不会发生(即使在第一次刷新网站时也会显示该框).
However, if I replace the inline tag in the file viewer.component.html by <inline url="red_box.x3d"> </inline>, this does not happen (the box is rendered even the first time the website is refreshed).
有人对我如何解决这种奇怪的行为有任何想法吗?我需要在文件 viewer.component.ts 中定义 inline 标记的URL.
Does anyone have any ideas on how could I fix this strange behaviour? I need to define the URL of the inline tag in the file viewer.component.ts.
我对Angular和Web开发非常陌生，对此我感到非常生气.任何帮助将不胜感激，谢谢.
I am very new to Angular and to web development, and I am getting mad about this. Any help would be appreciated, thanks.
推荐答案
如 Shane van den Bogaard 所建议的，通过将 [url] 替换为可以解决该问题.> [attr.url] 在文件 viewer.component.html 中.另外，有必要修改文件 viewer.component.ts .现在其内容应为以下内容:
As Shane van den Bogaard suggested, the problem is solved by replacing [url] with [attr.url] in the file viewer.component.html. Also, it is necessary to modify the file viewer.component.ts. Its content now should be the following:
import { Component, AfterViewInit, OnDestroy } from '@angular/core';
declare var System: any;
@Component({
moduleId: module.id,
templateUrl: 'viewer.component.html',
styleUrls: ['viewer.component.css'],
})
export class ViewerComponent implements AfterViewInit, OnDestroy{
x3d_filename: string = "red_box.x3d";
constructor() {
this.importX3d();
}
ngAfterViewInit(){
if(window["x3dom"] != undefined){
window["x3dom"].reload();
}
}
importX3d():void{
System.import('x3dom').then(() => {
console.log('loaded x3d');
}).catch((e:any) => {
console.warn(e);
})
}
ngOnDestroy(){
System.delete(System.normalizeSync('x3dom'));
}
}
这篇关于Angular和X3D集成:奇怪的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
