文章/答案/技术大牛

发布

社区首页 >问答首页 >角和X3D积分:奇怪的行为

问角和X3D积分:奇怪的行为
EN

Stack Overflow用户

提问于 2017-06-01 16:33:07

回答 1查看 403关注 0票数 2

我发现了插入角度组件(version 4)中的x3d的一些行为，我认为这是非常奇怪的。

我创建了一个具有以下结构的角项目：

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

我将x3dom库添加到package.json和sysytemjs.config.js中。

我的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)是：

<?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
home.component.ts：将{ Component，OnInit }从‘@角/核心’导入；@Component({ moduleId: module.id，templateUrl：‘core.Component.html’，styleUrls：‘core.Component.css’，})导出类HomeComponent{构造函数(){}

这个问题出现在viewer组件中。构成此组件的文件的代码如下：

viewer.component.html
viewer.component.ts：从‘@角/核心’导入{ Component，OnInit }；声明var System: any；@Component({ moduleId: module.id，templateUrl：'viewer.component.html'，styleUrls：'viewer.component.css'，})导出类ViewerComponent实现OnInit{ x3d_filename: string = "red_box.x3d"；构造函数(){ this.importX3d()；} ngOnInit(){ if(窗口“x3dom”!=未定义){ window"x3dom".reload()；} importX3d():void{ System.import('x3dom').then(() => { console.log('loaded x3d')；}.catch((e:任意) => { console.warn(e)；}}

我的角度应用程序从组件home到组件viewer，反之亦然，通过路由。路由在文件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时，场景都是空的。但是，在我通过路由访问此组件的后续时间(没有刷新)，该框将呈现在场景中。

但是，如果我用inline替换文件viewer.component.html中的<inline url="red_box.x3d"> </inline>标记，则不会发生这种情况(即使在第一次刷新网站时也会呈现该框)。

有人对我如何纠正这种奇怪的行为有任何想法吗？我需要在文件inline中定义viewer.component.ts标记的URL。

我对角质化和网络开发非常陌生，我对此非常恼火。任何帮助都将不胜感激，谢谢。

angular

typescript

x3d

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-09-29 12:36:40

正如Shane建议的那样，通过在文件[url]中替换[attr.url]来解决这个问题。此外，有必要修改文件viewer.component.ts。其内容如下：

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'));
    }

}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44312860

复制

相似问题

问角和X3D积分:奇怪的行为
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角和X3D积分:奇怪的行为EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角和X3D积分:奇怪的行为
EN