标签: angular5

我有一个在 springboot 端口 8080 上运行的 Web 服务。当我点击下面的 url 时，它工作正常：

http://localhost:8080/app，我将 url 重定向到下面：

http://localhost:8080/myHome/home

现在当我刷新页面时，我收到 404

下面是我的 index.html 的内容：

  <base href="/myHome">

包.json：

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build --dev --deploy-url=\"/app/\"",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "protractor"
},

我曾尝试使用中提到的 LocationStrategy

Angular 2: 404 错误在我通过浏览器刷新时发生，但它对我不起作用。

我在我的 angular 应用程序中使用 PrimeNG，我有 p-dropdown 的问题

题

我有国家和 caste_category 的两个下拉菜单，我只为印度提供 caste_reservation ，如果选择其他国家/地区，则需要选择 caste_category 的 OPEN 选项并禁用该下拉菜单。

我正在尝试创建一个 Angular Universal 应用程序，在构建时构建特定路由，将 AppShell 注入 Index.html 页面，作为尽快在用户面前获取有意义内容的一种方式（当 Angular 应用程序正在下载时）。我正在按照Angular 大学的说明进行操作，并按照说明进行操作。但是，当我系统地将现有应用程序的功能添加到此测试应用程序中时，我遇到了“意外令牌导入”错误，该错误源于浏览器应用程序所需的第 3 方插件，但对于非常简单的服务器应用程序我不需要我正在尝试构建并注入 Index.html 作为我的 App Shell。

我花了几个小时研究这个，发现有很多帖子推荐 webpack，但是，我使用的是 Angular CLI。我不确定如何将 webpack 与 Angular CLI 构建过程结合起来。

我发现这篇文章似乎表明您可以使用 tsconfig.server.json 的排除部分从 Angular Universal 构建中排除模块。我已经尝试在 tsconfig.server.json 中列出要排除的模块，但是，我仍然收到“意外的令牌导入”错误。

我有一条路线需要构建并注入到我的索引页面中。我希望/认为我应该能够排除我的绝大多数应用程序，因为它与创建 AppShell 无关。我认为 Angular 应该简单地构建为服务器应用程序注册的路由所需的必要位。

我使用的是 Angular CLI 版本 1.7.3 和 Angular 版本 5.2.4。

有没有人知道如何从构建到 Angular Universal 应用程序中排除不必要的模块？

谢谢你的时间。

我有一个动画，当我在组件之间切换时，它应该滑入和滑出，但它不起作用。因此，当您从组件切换时，您现在看到的应该向左滑动，而您要加载的则从右侧滑动。

原谅我糟糕的画，但我希望这更有意义：

这是我的代码：

清单.component.ts

import {Component, Input, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
import {animate, style, transition, trigger} from "@angular/animations";

@Component({
    selector: 'app-checklist',
    templateUrl: './checklist.component.html',
    styleUrls: ['./checklist.component.scss'],
    encapsulation: ViewEncapsulation.None,
    animations: [
        trigger('animation', [
            transition('void => *', [
                style({transform: 'translateX(-100%)'}),
                animate(1000)
            ]),
            transition('* => void', [
                animate(1000,
                    style({transform: 'translateX(100%)'}))
            ]),
        ])
    ]
})
export class ChecklistComponent implements OnInit {

    @Input() page = 'main';

    @ViewChild('modalElement') modalElement;

    constructor() {
    }

    ngOnInit() {
    }

    onPage(page: string): void {
        this.page = page;
    }
}

清单.component.html

<ng-template …

我有一个带有动态创建组件的 App 组件。父组件有一个<ng-content>元素，以便我们可以将子组件投影到父组件中。

应用组件：

@Component({
  selector: 'my-app',
  template:`<ng-container #parentcontainer></ng-container>`,
})

父组件：

@Component({
  selector: 'parent',
  template: `
  <ng-container #container></ng-container>
  <ng-content></ng-content>

                `
})

子组件：

@Component({
  selector: 'child',
  template: `<label>
                <input type="radio">
              </label>
                `
})

我的问题是，有什么方法可以访问子组件内的 App 组件的 ViewContainerRef (#parentcontainer) 吗？目标是在稍后阶段动态地将其他组件插入 #parentcontainer 中，例如从子组件单击某些按钮。

这是StackBlitz上的工作示例

我们有一个 AngularJS 应用程序，其中包含独立运行的独立 Angular 应用程序。每个模块都在一个单独的路径中

本地主机:8080/OurMainApplication/angular1Application1 本地主机:8080/OurMainApplication/angular1Application2

现在我们将在 Angular 5 中添加一个新模块，该模块位于不同的路径中，例如

本地主机:8080/OurMainApplication/angular5Application1

所以问题是 AngularJS 具有静态内容，如果我们进行更改并重新部署到服务器中，它将在浏览器中自动受到影响。但是对于 angular 5 应用程序，为了运行它，我们需要有 2 个选项

1. “ng build” 有 dist 文件夹（每次我们做一个简单的改变都太昂贵了）
2. “ng serve”（这没关系，但它在自己的服务器上运行）

有什么方法可以仅自动编译我们更改的文件（如“ng serve”），以便我可以将 angular 5 编译的更改重新部署到正在运行的 tomcat 服务器（当我们正在开发时），因为我们的后端服务和 angular 应用程序都正在同一台服务器上运行，并且不希望新服务器运行我们将要介绍的新 angular 5 应用程序。

一旦 angular 5 应用程序中的任何文件得到更新，angular-cli 或其他一些技术是否有自动编译的方法

我正在尝试将 Popper.js 设置为使用 angular 5，而无需引导程序或 jquery。我尝试按照此https://github.com/FezVrasta/popper.js/#react-vuejs-angular-angularjs-emberjs-etc-integration 进行操作，但这并不是角度应用程序的 A 到 B 点描述。

我通过 npm 安装了 Popper.js

npm install popper.js --save

然后我选择将 esm 模块捆绑到我的 angular-cli 脚本中

"scripts": [
                   (...)
        "../node_modules/popper.js/dist/esm/popper.js"
      ],

由于 esm/popper.js 导出 Popper 变量如下。

var Popper = function () {

我想我会像这样在我的角度模板中声明 popper 变量

declare var Popper;

唉，我运气不好。

有人对如何正确实现这一点有想法吗？

这可能吗？假设我有以下文本要翻译：

<p>You currently have <span class="bold">{{rewards?.points}}</span> points worth <span class="bold">{{rewards?.amount | currency}}</span> statement credit.</p>

我希望这段文本是可翻译的，但有两件事让我感到困惑 - 如何注入变量点数/数量以及如何保留粗体跨度标签。

从我的 en-US.json 文件：

"statement": "You currently have {{points_param}} points worth {{credit_param}} statement credit."

如果我想对点/数量使用静态值，则执行以下操作，但这不会保留粗体样式或允许使用变量值。

<p [innerHTML]="'redeem.statement' | translate:{points_param:'50',credit_param:'100'}"></p>

我正在尝试从前端应用程序发送自定义 HTTP 标头，以便它与网关进行交互。这是我的角函数：

import {Http, Headers, Response, RequestOptions } from ‘@angular/http’;
getXById(id :number){
    let options = nee RequestOptions({ headers : new Headers({“X-fastgate-resource” :”resource_name}) });
    return this.http.get( http://url + “/resource”, options)

我希望看到一个标题，“X-fastgate-resource”作为键，“resource_name”作为值。我得到的是这样的：

Request Headers:
   OPTIONS http://url HTTP/1.1
   host...
   Access-Control-Request-Headers: x-fastgate-resource 

我一直找不到关于这个主题的任何东西，所以我想我会问。

我目前正在我的Angular 5 应用程序上编写 E2E 测试。E2E 由Protractor执行，如默认 Angular CLI 生成器项目中的配置。我需要能够在 E2E 测试中更改文本输入字段的值。

我当前的代码。

...
it('should submit report.',() => {
    page.setField("100");
...

上面引用了这个类和方法

import { browser, by, element } from 'protractor';

export class Page {

setField(text: string): Page {
    let field = element(by.id('myField'));
    field.sendKeys(text);
    return this;
}    
...

和我的 html。

<input id="myField" decimal="16" dataLoadedEvent="{{formatData}}" [(ngModel)]="rm.dataField" class="form-control input-sm">

这很简单。显然，我已经将它概括为消费......但希望它仍然能说明问题。

注意事项：

• 如果我从 html 输入字段中删除以下内容， .sendKeys() 工作

  decimal="16" dataLoadedEvent="{{formatData}}" [(ngModel)]="rm.dataField"
  

  Run Code Online (Sandbox Code Playgroud)

• 如果我只是删除

  decimal="16" dataLoadedEvent="{{formatData}}" 
  

  Run Code Online (Sandbox Code Playgroud)

  sendKeys() 仍然不起作用。这意味着问题出在字段上的 [(ngModel)] 绑定上。不适用于我的自定义十进制格式指令。

所以，我的问题是，我需要做什么才能使 …