小编Ste*_*ons的帖子

我有一个数据驱动的Angular应用程序.我有一个切换组件,我传递切换状态.我的问题是双向数据绑定似乎不起作用,除非我将toggle布尔值作为对象传递.有没有办法让它在不使用EventEmitter或将变量作为对象传递的情况下工作.这是一个可重用的组件,应用程序是大量数据驱动的,因此将值作为对象传递给非选项.我的代码是......

toggle.html

<input type="checkbox" [(ngModel)]="toggled" [id]="toggleId" name="check"/>

toggle.component.ts

import { Component, Input, EventEmitter, Output } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'toggle-switch',
  templateUrl: 'toggle-switch.component.html',
  styleUrls: ['toggle-switch.component.css']
})

export class ToggleSwitchComponent {

  @Input() toggleId: string;
  @Input() toggled: boolean;

}

parent.component.html

<toggle-switch toggleId="toggle-1" [(toggled)]="nongenericObject.toggled"></toggle-switch>

我有一个在docker容器内运行的Angular2/Angular应用程序,并使用nginx来提供它.所以我的app base =/myapp /.使用基本网址(即www.server.com/myapp或www.server.com/myapp/)访问应用时,一切正常

events {
  worker_connections  4096;  ## Default: 1024
}

http {
  include /etc/nginx/conf/*.conf;

  server {
    listen       80 default_server;

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;
    underscores_in_headers on;

    location /myapp {
      # If you want to enable html5Mode(true) in your angularjs app for pretty URL
      # then all request for your angularJS app will be through index.html
      try_files $uri /myapp/index.html;

    }

    #Static File Caching. All static files with the following extension will be cached for 1 day
    location …

我有一个使用ngExpressEngine服务的Angular 5应用程序(遵循Angular Universal启动项目).我的应用程序有一个组件,它发出HTTP请求以显示一些数据.一切正常,但当我使用fetch作为谷歌机器人时,它返回渲染的页面,但没有数据.是否有任何使ngExpressEngine服务器在将页面呈现给用户之前等待HTTP请求？

我有一个服务运行4个swarm节点(ServiceA)和一个运行在同一个Swarm上的4个节点上的Nginx服务.Nginx服务公开/发布端口80和443.所有服务都连接到同一个用户定义的覆盖网络,最重要的是我可以从容器内卷曲/ ping服务名称(ServiceA),所以到目前为止一切正常.

我的问题是如何让Nginx上游使用服务名称？我已经阅读了很多,并尝试将其添加到nginx.conf resolver 127.0.0.11 ipv6=off;但它没有帮助,Nginx服务将无法启动.关于如何让Nginx看到Docker网络DNS名称的任何想法？

这是我的nginx.conf

events { 
    worker_connections 4096; 
}

http {
    include /etc/nginx/conf/*.conf;
    include /etc/nginx/mime.types;
    proxy_intercept_errors off;
    proxy_send_timeout 120;
    proxy_read_timeout 300;

    upstream serviceA {
        ip_hash;
        server serviceA:8081;
    }

    server {
        listen 80 default_server;
        resolver 127.0.0.11 ipv6=off;
        keepalive_timeout  5 5;
        proxy_buffering    off;
        underscores_in_headers on;

        location ~ ^/serviceA(?<section>.*) {
            access_log /var/log/nginx/access.log nginx_proxy_upstream;
            proxy_pass http://serviceA/$section$is_args$query_string;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }

    server {
        listen 443 ssl;
        resolver 127.0.0.11 ipv6=off;
        keepalive_timeout  5 5;
        proxy_buffering    off; …

我有一个Angular应用程序,我想使用particles.js但是我不知道如何添加它并让它工作.

我把它添加到了.angular-cli.json

  "scripts": [
    "../node_modules/particles.js/particles.js"
  ],

我已将其导入我的组件

import * as  particlesJS from 'particles.js';

并试图使用它来初始化它

  particlesJS.load('particles-js', 'assets/particles.json', function() {
    console.log('callback - particles.js config loaded');
  });

有人有这个工作吗？

我尝试了以下尝试单击选择下拉列表中的选项,但没有任何工作.

selectEl = fixture.debugElement.query(By.css('#dropdown'));
selectEl.nativeElement.options[3].nativeElement.dispatchEvent(new Event('click'));
selectEl.queryAll(By.css('option'))[3].nativeElement.click();
selectEl.nativeElement.options[3].nativeElement.click();

在每次运行fixture.detectChanges();后运行更改检测但是当我去检查元素值时它没有改变. expect(selectEl.nativeElement.options[selectEl.nativeElement.selectedIndex].textContent).toBe('name2');

我错过了一些简单的工作吗？

我有一个包含 3 个选择下拉列表的组件，没有附加 css 类，并且每个下拉列表都有一个唯一的 ID。在我的组件中，我希望将元素作为 DebugElements 获取，以便我可以在触发各种事件后测试它们的状态。从 Angular 网站可以看到debugElement.query(By.css('[attribute]'));. 如何获取我的下拉菜单 By.id

我有一个有下拉列表的组件.更改后,它会触发一个事件,该事件通过数组进行过滤,以根据事件值从数组中获取selectedProduct.

我的代码如下:

  public onProductChanged(event): void {
    this.selectedProduct = this.products.find((product: Products) => product.id == event.target.value);
  }

我的选择下拉菜单:

<select id="product" (change)="onProductChanged($event)">
    <option>--- Please Select ---</option>
    <option *ngFor="let product of products" [value]="product.id"> {{ product.displayName }} </option>
</select>

产品对象是一个对象:

{ "id": 1, "name": "name_here", "displayName": "Name Here" }

这一切都有效,但我想在我的组件测试中测试,更改选择值会触发事件并检索正确的值.

我的测试代码如下:

  describe('Product selection', () => {
    it('should select product', () => {

      expect(component.selectedProduct).toBeUndefined();
      productSelectElement.nativeElement.value = 'Product Name';
      productSelectElement.nativeElement.dispatchEvent(new Event('change'));

      fixture.detectChanges();

      expect(component.onProductChanged).toHaveBeenCalled();
      expect(component.selectedProduct).toEqual({ "id": 1, "name": "product_name", "displayName": "Product Name" });
    });
  });

已调用productChanged事件并且该测试通过.但是,我的selectedProduct始终为null.如何使用下拉列表中更改的值触发事件？

我有一个路由模块如下：

应用程序路由模块

const routes: Routes = [
  {
    path: '',
    redirectTo: environment.devRedirect,
    pathMatch: 'full',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 'customers/:customerId/contracts/:contractId',
    loadChildren: './grouping/grouping-routing.module#GroupingRoutingModule'
    canActivate: [AuthenticationGuard],
  }
];

以及一个带有路由的子组件：

const routes: Routes = [
      {
        path: 'create',
        component: CreateEditComponent,
        data: { animation: 'create' },
        canActivate: [ AuthenticationGuard ]
      },
      {
        path: ':groupId/edit',
        component: CreateEditComponent,
        data: { animation: 'edit' },
        canActivate: [ AuthenticationGuard ]
      },
      {
        path: '',
        component: OverviewComponent,
        data: { animation: 'overview' },
        canActivate: [ AuthenticationGuard ]
      }
];

我有一个顶级导航栏组件，位于 app.component.html …

如何让angular2路由工作并将http请求代理到另一台机器上的rest api？

我在nginx服务器上有一个angular2 web应用程序,它提供静态html文件.我在另一台具有不同IP地址的计算机上托管了一个单独的rest api.我已将位置设置为/在我的nginx配置文件中,以允许angular2路由正常工作.我还添加了一个位置/ api /我希望拦截任何api请求并将它们代理到我的后端api.

我的nginx conf代理设置为http://swapi.co用于测试目的.

events {
  worker_connections  4096;  ## Default: 1024
}

http {
  server {
    listen       80;
    server_name  localhost;

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;

    location / {
         # If you want to enable html5Mode(true) in your angularjs app for pretty URL
         # then all request for your angularJS app will be through index.html
         try_files $uri /index.html;
    }

    # /api will server your proxied API that is running on same machine …

我正在努力解决如何使用角度管道基于另一个对象数组过滤对象数组的问题.到目前为止我所拥有的是一个基于单个参数进行过滤的管道.

我有2个数组,array1和array 2,它们都包含复杂的对象.过滤后的数组(array1)应该只包含array1.value === array2.value的对象

我的代码到目前为止:

import { Injectable, Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'arrayFilter'
})
@Injectable()
export class AttributeFilterPipe implements PipeTransform {
  transform(array: any[], filterFrom: any[]): any {
    return array.filter(item => item.value.indexOf(filterFrom[0].value) !== -1);
  }
}

我怎样才能做到这一点？

我在下面尝试过，但这不起作用

NavView.SelectedItem = 1;