提前致谢.

由于您要记录错误,因此可以将错误发布到服务器并将其存储到数据库或文件系统.这意味着你需要服务器端的一些框架,如PHP,ASP.NET Core ……

如果您使用Google分析,则另一个选项(如果您真的想避免使用我不推荐的服务器框架)是使用Google AnalyticsAPI.我曾使用API将客户端错误记录到Google Analytics.

ga('send',{
  hitType: 'event',eventCategory: 'Error',eventAction: window.location.href,eventLabel: your_error_object
});

我有一个Angular 2应用程序,我正在使用Typescript接口来帮助构建各种数据位.问题是我有一个带有多个接口的文件,当我尝试将其导入组件时,可以毫无问题地引用第一个接口,但第二个接口会导致错误.

例如 …

myapp.model.ts
  export interface IObjectA { id: number; name: string; }
  export interface IObjectB { id: number; related: IObjectA[]; }

myapp.component.ts
  import { IObjectB } from './myapp.model';

这导致Angular CLI编译器失败并显示错误…

... myapp.model.ts is not a module ...

我似乎无法解决如何解决这个问题.我确定我错过了一些非常明显的东西,但你知道他们对第二双眼睛的看法.

对于每个人的信息,我正在运行(ng -v)…

> Angular 4.0.1
> @ angular / cli 1.0.0
>节点7.5.0
>打字稿2.2.2

希望这有助于……

更具体地说,我要做的是使用我的照片文件夹中的图像为引导轮播设置图像.目前我这样做：

private _images: Image[] = []

ngOnInit(): void {
    this._images = [
        { "title": "Slide 1","url": "../photos/carousel/gg_slide 1.jpg" },{ "title": "Slide 2","url": "../photos/carousel/gg_slide 2.jpg" },{ "title": "Slide 3","url": "../photos/carousel/gg_slide 3.jpg" },{ "title": "Slide 4","url": "../photos/carousel/gg_slide 4.jpg" },{ "title": "Slide 5","url": "../photos/carousel/gg_slide 5.jpg" }
    ]
}//ngOnInit

然后在html文件中使用images数组,如下所示：

<carousel>
    <slide *ngFor="let img of _images">
        <img src="{{img.url}}" alt="{{img.title}}">
    </slide>
</carousel>

我希望能够遍历照片文件夹中的任何文件,并将它们添加到images数组中.
这样我更新旋转木马所需要做的就是更改照片文件夹中的照片.

I have found this example.

由于从assets文件夹访问文件很简单,所以我们可以利用它,我们可以在文件中存储一组图标文件名,例如icons.json.
1.在assets文件夹中创建如下的icons.json-

{  // ---------- icons.json---------
  "icons-array" : ["icon-name1","icon-name2","icon-name3"]
}

2.将assets-name1.svg,icon-name2.svg,icon-name3.svg文件保存在assets / icons文件夹中.
3.在启动角度应用程序时读取icons-json文件. How to read file at Angular Application Start-up
4.在读取icons.json内容后,将icons-array属性的值存储到全局可访问的数组中,比如globalAccessibleIconsArray.
 5.使用阵列 –

for (const icon of globalAccessibleIconsArray) {
      this.matIconRegistry.addSvgIconInNamespace(
        'my-namespace',icon,domSanitizer.bypassSecurityTrustResourceUrl(`./assets/icons/${icon}.svg`)
      );
    }

 因此,添加新图标

>您必须将新图标文件放在assets / icon文件夹中,并且>在assets文件夹中的icons.json文件中添加新文件名.

应用程序/ app.ts

module myModule{
class MyConfig {
    constructor( private $stateProvider:ng.ui.IStateProvider,private $urlRouterProvider:angular.ui.IUrlRouterProvider ) {
        this.init();
    }

    private init():void {
        this.$stateProvider.state( 'home',{
                abstract:true,template: '<main></main>',url: '/'
            }).state('home.main',{
                views: {
                    'lhp@home': { template: '<lhp></lhp>' },'rhs@home': { template: '<rhs></rhs>' }
                },url: '/main',});

        this.$urlRouterProvider.otherwise('/main');
    }
}

let myApp = angular.module( 'myModule',['ui.router'] );
myApp.config(['$stateProvider','$urlRouterProvider',($stateProvider,$urlRouterProvider) => {
    return new MyConfig($stateProvider,$urlRouterProvider);
}]);

}

main指令是一个简单的div,它是两个命名视图的容器

main.html中/ main.controller.ts

module app.Controllers {
    export class MainController {
        constructor( private $log:ng.ILogService ) {
            this.Init();
        }

        private Init() {
            this.$log.info('Main Controller');
        }

    }

    angular.module('myModule').controller( 'mainController',['$log',MainController] );
}

应用/组件/ main.html中

<div>
    <div id="wrap">
        <div id="left_col" ui-view="lhp"></div>
        <div id="right_col" ui-view="rhs"></div>
    </div>
</div>

应用/组件/ main.directive.ts

module app.Directives {
    'use strict';
    export class MainDirective implements ng.IDirective {
        public templateUrl:string = 'components/main.html';
        public restrict:string = 'E';
        public controller:string = 'mainController';
        public scope = {};

        constructor(private $log:ng.ILogService) {
            this.$log.info('main directive');
        }

        public static Factory() {
            return (log:ng.ILogService) => {
                return new MainDirective(log);
            };
        }
    }

    angular.module('myModule').directive('main',app.Directives.MainDirective.Factory()]);
}

应用/组件/ lhp.controller.ts

module app.Controllers {
    export class LhpController {
        constructor( private $log:ng.ILogService ) {
            this.Init();
        }

        private Init() {
            this.$log.info('LHP Controller');
        }
    }

    angular.module('myModule').controller( 'lhpController',LhpController] );
}

应用/组件/ lhp.html

<div>
    THIS IS A TEST
</div>

应用/组件/ lhp.directive.ts

module app.Directives {
    'use strict';
    export class LhpDirective implements  ng.IDirective {
        public templateUrl:string = 'components/lhp.html';
        public restrict:string = 'E';
        public controller:string = 'lhpController';
        public controllerAs:string = 'lctrl';
        public scope = {};

        constructor(private $log:ng.ILogService) {
            this.$log.info('lhp directive');
        }

        public static Factory() {
            return (log:ng.ILogService) => {
                return new LhpDirective(log);
            };
        }
    }

    angular.module('myModule').directive('lhp',app.Directives.LhpDirective.Factory()]);
}

视图rhs的设置与lhp完全相同.我已经确认了两个rhs,并且lhp指令通过使home状态非抽象并将它们作为模板加载来正常工作.两者都正确呈现.当我做家庭状态摘要是我遇到问题.主控制器更不用说html根本不加载.打字稿和抽象视图有问题吗？有没有人遇到过类似问题和嵌套的命名视图？我在互联网上搜索了类似的例子,但找不到任何相关内容.我发现的最接近的例子是：How can I add ui-router stateProvider configuration to my application with Typescript?,它显示了一个抽象视图应该可以使用typescript,但是示例没有填写详细信息.我是否遗漏了嵌套命名视图的内容以使用typescript？

任何帮助将不胜感激.

private init():void {
    this.$stateProvider.state( 'home',{
            abstract:true,template: '<main></main>'
        }).state('home.main',{
            views: {
                'lhp@home': { template: '<lhp></lhp>' },'rhs@home': { template: '<rhs></rhs>' }
            },});

    this.$urlRouterProvider.otherwise('/main');
}