小编nir*_*aft的帖子

在Angular 6中生成服务时,使用Injectable装饰器提供的目的是什么?

在Angular CLI中生成服务时,它会添加带有'provided in'属性的额外元数据,其默认值为'root',用于Injectable装饰器.

@Injectable({
  providedIn: 'root',
})
Run Code Online (Sandbox Code Playgroud)

究竟做了什么?我假设这使得服务可用作整个应用程序的"全局"类型单例服务,但是,在AppModule的提供者数组中声明此类服务会不会更清晰?

更新:

对于其他任何人,以下段落也提供了另一个很好的解释,特别是如果您想要仅为功能模块提供服务.

"现在有一种新的,推荐的方法,使用新的provideIn属性直接在@Injectable()装饰器中注册提供者.它接受'root'作为值或应用程序的任何模块.当你使用'root ',您的注入将在应用程序中注册为单例,并且您不需要将其添加到根模块的提供者.同样,如果您使用providedIn:UsersModule,注入可注册为UsersModule的提供者无需将其添加到模块的提供者." - https://blog.ninja-squad.com/2018/05/04/what-is-new-angular-6/

更新2:

经过进一步调查,我认为它只是有用 @Injectable()

如果要在除根模块之外的任何模块中提供服务,那么最好在功能模块的装饰器中使用providers数组,否则您将受到循环依赖性的困扰.这里有趣的讨论 - https://github.com/angular/angular-cli/issues/10170

angular angular6

77
推荐指数
7
解决办法
2万
查看次数

无法连接'str'和'float'对象?

我们的几何老师给了我们一个任务,要求我们创建一个玩具在现实生活中使用几何体的例子,所以我认为制作一个程序来计算需要多少加仑的水来填充某个池才是很酷的.形状,并具有一定的尺寸.

这是迄今为止的计划:

import easygui
easygui.msgbox("This program will help determine how many gallons will be needed to fill up a pool based off of the dimensions given.")
pool=easygui.buttonbox("What is the shape of the pool?",
              choices=['square/rectangle','circle'])
if pool=='circle':
height=easygui.enterbox("How deep is the pool?")
radius=easygui.enterbox("What is the distance between the edge of the pool and the center of the pool (radius)?")
easygui.msgbox=("You need "+(3.14*(float(radius)**2) * float(height)) + "gallons of water to fill this pool.")
Run Code Online (Sandbox Code Playgroud)

我不断得到这个错误:easygui.msgbox =("你需要"+(3.14*(浮动(半径)**2)*浮动(高度))+"加仑水来填充这个池.")TypeError:不能连接'str'和'float'对象

我该怎么办?

python string concatenation

29
推荐指数
2
解决办法
7万
查看次数

Angular2:如何使用system.js加载NPM模块?

我正在使用Angular2试验练习应用程序,并希望知道在Angular2应用程序中包含npm模块的方法.

例如,我正在尝试使用Angular-uuid npm模块(https://www.npmjs.com/package/angular-uuid),但无法找到实现此目的的正确方法.模块文件下载到/ node_modules目录中,也添加到packager.json,我使用的是system.js.

1)其中一个选项是使用sytem.import("angular-uuid"),但是我仍然无法识别模块.2)我们还必须使用3)我们可以从"angular-uuid"导入为angular-uuid的import*;

添加npm模块的推荐方法是什么?

angular

7
推荐指数
1
解决办法
868
查看次数

Typescript 基于接口从另一个对象创建一个对象

我想ExampleInterface从另一个对象创建一个对象,但只保留ExampleInterface包含的那些属性。

是否可以不手动复制每个密钥?

export interface ExampleInterface {
  property1: string;
  property2: string;
}
Run Code Online (Sandbox Code Playgroud)

进而

const exampleObject: ExampleInterface = anotherObjectThatHasMoreProperties;
Run Code Online (Sandbox Code Playgroud)

提前谢谢你。

typescript

7
推荐指数
1
解决办法
9558
查看次数

你可以用带有require.js的角度JS运行带有动态数据的Highcharts吗?

HTML

<div class="row">
    <div class="col-md-12">
        <div class="thumbnail alert-info alert alert-dismissible fade in">
            <p class="lead text-center"> Our Dynamic KPI</p>
        </div>
    </div>
</div>

<script src="scripts/cad.js"></script>

<div id="container" class="chart"></div>
Run Code Online (Sandbox Code Playgroud)

JS脚本

$.get('scripts/dataCAD.csv', function(csv) {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        data: {
            csv: csv
        },
        title: {
            text: 'CAD'
        },
        yAxis: {
            title: {
                text: 'Units'
            }
       }
    });
});
Run Code Online (Sandbox Code Playgroud)

角度为2的分量

import {Component} from '@angular/core';

@Component({
    selector: 'cad',
    templateUrl: './cad.html'
})
export class cadcomponent {

}
Run Code Online (Sandbox Code Playgroud)

我使用require.js在我的应用程序中运行其他脚本,并且它们都运行良好但是我在控制台中没有收到此高箱页面的错误?但是没有加载数据?我确实看过这个链接https://www.npmjs.com/package/angular2-highcharts#faq然而我无法使它工作.如果有人有任何经验与highcharts和angular 2任何帮助将非常感谢!

javascript jquery highcharts angularjs angular

6
推荐指数
0
解决办法
235
查看次数

main.worker.js?那是什么?

我正在使用Mozilla PDF Viewer在Ionic 2中构建PDF查看器,但遇到了问题.我pdf.js按照这些说明建造了.生成的代码包括以下行:

GET http://localhost:8100/build/main.worker.js

Chrome在这一行上抱怨无法找到该文件pdf.worker.js.

现在,我之前没有遇到过网络工作者,所以我不确定这个错误意味着什么,或者在哪里找到或构建这个文件.我注意到构建过程也会产生一个名为的文件main.worker.js,我怀疑这可能是它之后的文件,尽管将其重命名为pdf.js无效.

如果你知道的话,我相信这是一个非常简单的问题.我错过了什么?


好的,经过多一点挖掘,我发现更符合我的情况.我正在使用Ionic 2,我不知道如何生成此行中引用的文件:

GET http://localhost:8100/build/main.worker.js

任何人都可以照亮我的黑暗心灵吗?

pdf pdf.js ionic-framework ionic2 angular

6
推荐指数
0
解决办法
816
查看次数

如何仅通过一个媒体源使用多个videogular2播放器

我有一个videogular2用于运行音频文件的angular 6应用程序。包含vg-player(父组件)的组件是ngSwitch语句的一部分,因此是?可以销毁的组件。

当视图更改时,我需要在后台运行音频。但是,当视图改变时,播放器的所有者将被破坏。

我无法更改这种复杂的开关逻辑,也无法隐藏组件。

我看到的唯一选项是在视图中显示播放器的控件(播放,暂停,音量和进度条),但播放器的源将放置在当前父项持有者组件之外。这样,当视图被破坏时,音频将保留在背景中。


因此,出现了一个确切的问题:我可以创建与媒体源同步的“模拟”控件吗?有一个单例服务为玩家提供整个沟通,但我想的主要问题是进度条。

  • 1-我可以只显示没有视频标签的播放器控件吗
<video id="singleVideo"
  [muted]="isMuted"
  preload="auto"
  [vgMedia]="media"
  playsinline>
  <source [src]="videoSrc" type="video/mp4">
</video>
Run Code Online (Sandbox Code Playgroud)
  • 2-如果可能,控件是否可以通过服务与源同步

总结:
-是否可以将多个不同的视图(仅保留播放器的控件)链接到一个源?
-将源放置在视图之外?
-要同步进度条吗?
-如果一个视图被破坏,剩下的视图将保留下来,并且从每个视图可以命令媒体播放器使用?
-在某些命令上要同步所有控件?

先感谢您!我认为这是非常合法的用例,值得观察。

videogular angular

6
推荐指数
0
解决办法
84
查看次数

如何在不模拟ActivatedRouteSnapshot的情况下测试角度护罩/旋转变压器

我正在尝试测试访问子级路由参数的Angular Resolver。

我的后卫工作正常,但是我无法轻松创建单元测试,因为我无法创建ActivatedRouteSnapshot带有子级路由(只读属性)。

我的解析器

@Injectable({
    providedIn: 'root'
})
export class MyResolverGuard implements Resolve<string> {

    constructor() {
    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): string {
        return route.firstChild.paramMap.get('my-param');
    }
}

Run Code Online (Sandbox Code Playgroud)

我的测试:

    it('should resolve chilren route params', () => {
        guard = TestBed.get(MyResolverGuard);
        const route = new ActivatedRouteSnapshot();
        // Cannot assign children because it's a read only property
        route.children = [...];
        const myResolverParams = guard.resolve(route, null);
    });
Run Code Online (Sandbox Code Playgroud)

除了使用模拟以外,还有其他方法ActivatedRouteSnapshot吗?

我的测试后卫方法好吗?

感谢您分享您的策略。

javascript angular angular-router angular-test angular-testing

6
推荐指数
0
解决办法
206
查看次数

Angular 8:无法实例化循环依赖 - ActivatedRoute

我正在尝试将APP_INITIALIZERAngular集成到我的项目中,以便在启动应用程序之前执行一些功能。当我在我的服务中使用来自 Angular的ActivatedRoute时,问题就出现了。

错误是:

Error: Provider parse errors:
Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
Run Code Online (Sandbox Code Playgroud)

我想我在内部使用了两次导入或类似的东西。基本上我尝试了一些其他配置,但最后总是抛出同样的错误。

STACKBLITZ 示例: https ://stackblitz.com/edit/angular-bhpe7m

预期行为:只是为了能够通过 ActivatedRoute 服务检索一些 QueryParams 并在运行 Angular 应用程序之前使用它们执行一些功能

cyclic-dependency angular

6
推荐指数
2
解决办法
3万
查看次数

开玩笑直到typemoq函数被调用

所以我有一个模拟(typemoq)http调用,我将其传递到我的react组件(安装了酶)中:

const mockhttp: TypeMoq.IMock<IHttpRequest> = TypeMoq.Mock.ofType<IHttpRequest>();
mockhttp
  .setup(x => x.get('/get-all-goal-questions'))
  .returns(() => {
    return Promise.resolve(mockResponse.object.data);
  });

const wrapper = mount(<Goals history={Object} http={mockhttp.object} />);

expect(wrapper.find('#foo')).to.have.lengthOf(1);
Run Code Online (Sandbox Code Playgroud)

但是,直到“期望”之后才调用模拟“ Get”,如何才能获得期望,直到调用该模拟进行测试?

//编辑这里是测试代码

let httpCall = this.props.pageHoc.httpRequest -- the call im mocking
Run Code Online (Sandbox Code Playgroud)

let httpCall = this.props.pageHoc.httpRequest -- the call im mocking
Run Code Online (Sandbox Code Playgroud)

javascript jestjs enzyme typemoq

5
推荐指数
1
解决办法
116
查看次数