小编pjl*_*b12的帖子

我正在尝试routerCanDeactivate在我的应用程序中使用该功能.使用它的简单方法如下:

routerCanDeactivate() {
    return confirm('Are you sure you want to leave this screen?');
}

我唯一的问题是它很难看.它只是使用浏览器生成的确认提示.我真的想使用自定义模态,如Bootstrap模式.我有Bootstrap模式根据他们单击的按钮返回true或false值.在routerCanDeactivate我执行可以接受真/假值或解析为真/假的承诺.

以下是具有以下routerCanDeactivate方法的组件的代码:

export class MyComponent implements CanDeactivate {
    private promise: Promise<boolean>;

    routerCanDeactivate() {
        $('#modal').modal('show');
        return this.promise;
    }

    handleRespone(res: boolean) {
        if(res) {
            this.promise.resolve(res);
        } else {
            this.promise.reject(res);
        }
    }
}

当我的TypeScript文件编译时,我在终端中收到以下错误:

error TS2339: Property 'resolve' does not exist on type 'Promise<boolean>'.
error TS2339: Property 'reject' does not exist on type 'Promise<boolean>'.

当我尝试离开组件时,模态启动,但随后组件停用并且不等待承诺解析.

我的问题是尝试计算Promise,以便该routerCanDeactivate方法等待解决的承诺.有没有理由说错误说没有'resolve'财产Promise<boolean>？如果我可以解决这个问题,我必须在routerCanDeactivate …

我有一个 Angular (v6.0.0) 应用程序，我试图在APP_INITIALIZER. 我已经阅读了几篇文章（例如this和this和this）以及诸如this之类的SO问题，并且大多数情况下都可以正常工作。

我让应用程序调用配置服务函数来在应用程序引导时（在 期间APP_INITIALIZER）加载配置。这一切都完美无缺。问题是应用程序的其他部分正在加载/初始化/在配置加载之前调用它们的构造函数，因此无法使用文件中的配置。以下是 app.module 文件的摘录：

function initConfig(configService: AppConfigService) {
    return () => configService.loadConfig();
}

...

@NgModule({
    imports: [AuthModule, SharedModule]
    providers: [
        {
            provide: APP_INITIALIZER,
            useFactory: initConfig,
            deps: [AppConfigService],
            multi: true
        },
        ...
    ]
})

和 AppConfigService 文件：

public loadConfig() {
    return this._http.get('./assets/app-config/config.json')
        .toPromise()
        .then((config: any) => {
            this.config = config;
        })
}

如您所见，该loadConfig函数返回一个承诺，并加载配置（我已经确认）。

但是，我尝试访问 AuthModule 构造函数中的配置（因此我可以提取与服务器进行身份验证所需的配置值）和 SharedModule 中的服务（在这种情况下它正在寻找 Sentry DSN），并且它们两者都在加载配置之前运行。我敢肯定还会有其他例子，但这是我目前发现的。

我的印象是应用程序中的任何内容在APP_INITIALIZER …

背景

我正在尝试为我的 Angular 应用程序编写一些 Cypress 测试。该应用程序内置在带有 Nx 的 monorepo 中，赛普拉斯在其中自动为我们安装和设置。我们正在使用 Identity Server 4 和 OAuth2 来保护 Angular 应用程序。我们使用NPM的angular-auth-oidc-client 包来处理登录/身份验证。该应用程序使用隐式流程，因此当您登录该应用程序时，您将被发送到身份验证服务器，输入您的凭据，然后被重定向回 Angular 应用程序。登录并重定向回 Angular 应用程序后的回调 URL 至少部分是，

/auth/calback#id_token=<token>

我不完全确定回调 URL 的其余部分，但我相信（根据我能找到的）它包括token_type(Bearer)、expires_in（在我的情况下为 3600）和state（我不知道应该放什么） .

题

我的问题是如何让 Angular 应用程序进行身份验证，以便我可以运行 Cypress 测试？我知道我无法真正执行隐式流程，所以我的计划是在每次测试之前使用 HTTP 请求获取令牌并手动将其输入到/auth/callbackAngular 应用程序的路由中，希望从那里 Angular 应用程序可以接管。这是设置：

cy.request(options).then((result: any) => {
  const { body: tokenInfo } = result;
  // I've used access_token and id_token, both with the same result
  cy.visit(
    `/auth/callback#id_token=${tokenInfo['access_token']}&token_type=${tokenInfo['token_type']}&expires_in=${tokenInfo['expires_in']}&state=some-fake-state`,
  );
}); …

我有一个带有以下路线的angular 2应用程序：

@RouteConfig([
new Route({ path: '/', component: Home, name: 'Home', useAsDefault: true}),
new Route({ path: '/employees', component: ViewEmployees, name: 'ViewEmployees'}),
new Route({ path: '/employees/add', component: AddEmployee, name: 'AddEmployee'}),
])

其中。当我通过以下方式更改路线时：

<a [routerLink]="['ViewEmployees']">View Employees</a>

没有问题。我可以通过这种方式从主页或AddEmployee路由中更改路由。当我处于AddEmployee路由并尝试以编程方式更改路由时，就会出现问题：

import {Router} from 'angular2/router';
...
constructor(private _router:Router) {}
...
navigate() {
    this._router.navigate(['ViewEmployees']);
}

它不起作用。它会将我发送到ViewEmployees视图，然后重新加载整个应用程序。如果我从Home组件执行相同的程序化路线更改，则不会有任何问题。该应用程序不会重新加载。

有谁知道为什么在这种情况下会这样做？我需要它来工作，以便我可以保存添加的员工，然后返回到员工列表视图。

在此先感谢您的帮助！

我正在开发的Angular 2应用程序用于呼叫中心.

我创建了一个Angular 2组件,它是一个bootstrap模式.当我在页面上实例化一个或多个时,它可以很好地工作,并创建触发器来打开它们.那里没有问题.我已经彻底测试了那部分.

现在在我的应用程序中,我们有一个复选框列表,当点击时,会弹出一个模态,并指示呼叫中心代理在选择呼叫原因时进行覆盖.

要创建这些模态和触发器,这是我放置的代码:

<div class="checkbox" *ngFor="#case of caseTypes; #i = index" data-toggle="modal" data-target="modal-i">
    <label>
        <input type="checkbox" [(ngModel)]="case.selected"> {{case.title}}
    </label>
    <instructions-modal [instruction]="case.instructions" title="{{case.title}}" closeButtonTitle="Finished" modalId="modal-{{i}}"></instructions-modal>
</div>

这似乎应该可以工作,但是当我转到页面时,我在浏览器控制台中收到以下错误:

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'data-toggle' since it isn't a known native property ("ss="col-md-6">
        <h4>Case Type</h4>
        <div class="checkbox" *ngFor="#case of caseTypes; #i = index" [ERROR ->][data-toggle]="modal" [data-target]="modal-i">
            <label>
                <input type="checkbox" [(ngModel)]="cas"): CaseCreation@8:64
Can't bind to 'data-target' since it isn't a known native property ("ase Type</h4> …

所以我正在尝试为文本输入构建自定义自动完成下拉列表.要做到这一点,我正在监听keydown事件,如果它是向上或向下箭头按下,我将一个$scope.arrowSelectedItem变量设置为列表中的正确变量.(作为旁注,所有功能都可以从弹出的列表中选择一个项目.我要做的就是突出显示他们用向上/向下箭头标记的当前项目.)

在标记方面,自动完成列表中的项目将使用ng-repeat,输出ng-repeat="item in itemList".ng-class我正在使用的表达方式是ng-class="{highlighted: item === arrowSelectedItem}".我知道$scope.arrowSelectedItem使用console.log在每个箭头按下时都会更新,但由于某种原因,该类没有正确更新到列表项.

我发现在第一次点击箭头键后,如果我让文本输入框失去焦点,则添加该类.然后,如果我在框中单击后退,移动箭头以选择其他项目,单击输入框,然后单击返回,该类将添加到新项目中.我知道这听起来很奇怪,但这就是我发现的.

我不确定的是为什么ng-class表达式没有在每个箭头按键上进行评估.有没有人有任何想法？

我尝试在 Sails.js 应用程序中使用 Redis 作为缓存，但很难让卷正常工作并让 Redis 实例自动保存数据。

这是我的 stack.yml 文件（的相关部分）：

redis:
  image: 'redis:latest'
  command: redis-server --appendonly yes
  command: ['redis-server', '--requirepass', 'mypasswordgoeshere']
  volumes:
    - ./redis-data:/data
  deploy:
    replicas: 1

我还有 Sails.js 服务和 Angular 应用程序服务，但没有显示它们，因为这里并不真正需要它们。

上面的内容并不完全按照预期的开箱即用。我希望 Docker 会自动为我创建该./redis-data文件夹（如果不存在），但事实并非如此。所以我必须创建该文件夹并确保权限设置正确。然后我希望 Redis 容器将其数据保存到appendonly.aof文件中并定期自动保存。这就是我尝试此操作时在我的本地计算机上发生的情况。

但是，在服务器上，它不会appendonly.aof为我保存文件，因此我想要保留的数据不会被保存，以便在堆栈重新启动时它仍然存在。

最奇怪的部分是我为 Sails.js 应用程序创建了一个卷来访问日志文件，并且不需要为应用程序创建文件夹；它只是创建了它，一切都按预期进行。我在这里遗漏了一些明显的东西吗？任何帮助将不胜感激。谢谢！

编辑

另外，如果我进入容器 ( docker exec -it container_id /bin/bash，该文件夹中没有任何内容/data可以让您进入。这就解释了为什么主机上也没有任何内容。

我在 Angular 项目中使用ng2-charts。我有两个版本的项目。当前的生产版本很旧，使用的是旧版本的 ng2-charts（以及，通过扩展，chart.js）。我正在升级项目。不过我遇到了一些奇怪的事情。

我正在使用 ng2-charts 中的圆环图，并且图表在旧版本中加载的默认大小是 1:1 的比例：

您可以看到它加载的高度和宽度为 240 像素。奇怪的是，在较新版本的 ng2-charts/chart.js 中，宽高比为 2:1：

我在新版本中使用相同的选项，相同的设置等。唯一的区别是包版本。

是否有 Chart.js 的设置可以帮助我修复它？我喜欢旧图表的大小，但不能让新图表做到这一点，而不允许canvas图表的 出血到我的组件之外，这显然是我不想要的原因。

我有两个型号在我蒙戈的数据库，Child并且Parent，例如。我会将多个孩子分配给一个父母。它们基本上是这样定义的：

childSchema = new mongoose.Schema({
    // fields
});

parentSchema = new mongoose.Schema({
    // fields
    ones: [{
        type: mongoose.Schema.ObjectId,
        ref: 'Child'
    }]
});

我让它工作到我可以将多个Childs保存到单个 s 的地方Parent，并且一切都保存了，并且在那里似乎一切都很好。您还可以将每个保存Child到多个Parents。

我要的是一个虚拟的领域上Child是parents，并填充与Parent其所分配的S。这很复杂，因为每个都Child可以有多个Parents，并且每个都Parent可以Child分配多个s。

我走的路线是：

childSchema.virtual('parents', {
    ref: 'Parent',
    localField: '_id',
    foreignField: 'children'
});

我之前在一家商店及其评论中做过这个，所以一个商店有多个评论，所以是多对一的关系，上面的方法奏效了。但是，有了这个，parents虚拟字段总是返回空值。

这是最好的方法吗？或者有没有更好的方法我应该研究？

编辑

我意识到我没有像我应该的那样手动填充虚拟字段，但是当我尝试这样做时，它只会让孩子的调用挂起并且永远不会从服务器返回。

我的猜测是，因为Parent模型具有该children属性，它会陷入无限循环，在那里它获取孩子并填充父母，填充孩子，填充父母......有没有办法限制这一点？

我正在尝试使用Docker来容纳使用Angular CLI构建的应用程序.它只是您使用时出现的默认文件,ng new以便我可以学习如何执行此操作.我正在尝试使用两步构建,其中第一步运行ng-build --prod --build-optimizer,然后将./dist文件夹中的结果放入具有为应用程序提供服务的Nginx的容器中.我知道如果我从我的命令行手动构建应用程序,然后运行一个Dockerfile只有第二步,我可以让Angular应用程序服务,但我希望Docker能为我做到这一点.

这是我的Dockerfile:

FROM node:8.9-alpine as angular-built
COPY package.json package.json
RUN npm install
COPY . .
RUN ng build --prod --build-optimizer

FROM nginx:alpine
LABEL author="Preston Lamb"
COPY --from=angular-built ./dist /usr/share/nginx/html
EXPOSE 80 443
ENTRYPOINT [ "nginx", "-g", "daemon off;" ]

我已尝试在Dockerfile的第一步使用node:8.9-alpine基本映像和johnpapa/angular-cli基本映像.一切都有效,直到RUN ng build --prod --build-optimizer命令,此时它失败并出现此错误:

无法读取null的属性'config'TypeError:无法在Class.run中读取属性'config'的null(/node_modules/@angular/cli/tasks/build.js:15:56)(/ node_modules/@) angular/cli/commands/build.js:216:26)在Class.validateAndRun的新Promise()处解析(/node_modules/@angular/cli/ember-cli/lib/models/command.js:261:20) Promise.resolve.then.then(/ node_modules/@ angular/cli/ember-cli/lib/cli/cli.js:140:24)at

谷歌搜索后,我发现这是因为CLI无法找到该.angular-cli.json文件.然后我读到默认情况下,Linux不会复制隐藏文件,所以它不会复制.angular-cli.json文件,而这就是错误出现的地方.

我的下一步是试图强制复制该文件.我尝试了以下两种方法,在COPY . .命令之前执行此步骤:

COPY .angular-cli.json .angular-cli.json

和 …

我正在尝试使用forkJoin运算符来组合两个可观察值并输出一个新值。其中一个电话带回了一组对象，这些对象的数据与保险单上的多个人相关（该部分不能更改）。另一个可观察到的信息告诉我们谁登录。我在考虑使用forkJoin这两个方法来获取两个值并仅返回已登录用户的信息。这是我尝试构建新的可观察对象的方法：

this.incentiveStepsHistory$ = forkJoin({
    incentiveStepsHistory: this._steps.getIncentiveStepsHistory(year),
    loggedInPerson: this._member.loggedInPerson$,
}).pipe(
    tap((data: any) => console.log(data)),
    map((data: any) => {
        // get the data that I want
    })
    untilDestroyed(this),
)

我已经尝试过这种方式，并且放弃了该this.incentiveStepsHistory$ =部分，只是订阅了（仅出于测试目的）。执行此操作并检查开发人员工具中的“网络”选项卡时，我看到了第一个调用并成功返回。第二个可观察值，loggedInPerson是BehaviorSubject.asObservable可观察的。当我pipe和tap在创建可观察的服务，将数据记录到控制台。因此，这两个可观察值在技术上都可以工作。

我还尝试过forkJoin像上述对象那样成为对象的参数，以及将每个可观察对象传递为其自己的参数。没什么区别，一切都一样。

问题在于数据永远不会返回到forkJoin创建该组件的组件。在tap此处显示的管道是从不打，也不是map。显式订阅或通过async模板中的管道订阅具有相同的效果：不输出任何内容。

我觉得自己做对了，但是什么也没做。任何提示，不胜感激。