标签: angular6

我正在尝试使用填充了数据对象的嵌套组件创建复杂的反应形式.

我试图实现的行为非常类似于模板驱动形式的双向数据绑定:当用户编辑表单的输入时,数据对象会自动更改.

但是与模板驱动的形式相反,我无法使用,[(ngModel)]因为它在角度V6的反应形式中被弃用.

我知道fromGroup.patchValue()只会进行单向绑定,然后不得不手动订阅更改事件并手动更新数据对象 - 这将导致大量疲惫的代码.

这种情况有没有解决方法？

我正在尝试使用Angular 6构建一个应用程序,我仍在设置所有内容.但似乎我的应用程序中的依赖注入有问题.

它无法解析任何构造函数参数.他们都导致了Uncaught Error: Can't resolve all parameters for AppComponent: (?)..即使是自定义服务也会导致相同的错误.

版本 (省略了对此不会产生任何影响的依赖项)

 "dependencies": {
    "@angular/common": "6.0.5",
    "@angular/compiler": "6.0.5",
    "@angular/core": "6.0.5",
    "@angular/forms": "6.0.5",
    "@angular/http": "6.0.5",
    "@angular/platform-browser": "6.0.5",
    "@angular/platform-browser-dynamic": "6.0.5",
    "@angular/router": "6.0.5",
    "core-js": "2.5.7",
    "reflect-metadata": "0.1.12",
    "rxjs": "6.2.1",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "6.0.5",
    "@ngtools/webpack": "6.0.8",
    "angular2-template-loader": "0.6.2",
    "awesome-typescript-loader": "5.1.0",
    "typescript": "2.7.2",
    "webpack": "4.12.0",
    "webpack-cli": "3.0.8",
    "webpack-dev-server": "3.1.4",
  }

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { …

我在角度6中安装了多个库,我需要在另一个库中导入一个库.他们相互依赖但不起作用

这是怎么回事:

ng generate library lib1

ng generate library lib2

现在在主应用程序中,package.json我tsconfig.json在compilerOptions库中添加(它们会自动插入)

"paths": { "lib1": ["../distPack/lib1"], "lib2": ["../distPack/lib2"] }

(我修改了它们生成的路径distPack)

我可以导入它们app.module,一切正常

import { Lib1Module } from 'lib1'

问题

我想: import { Lib1Module } from 'lib1'inlib2/src/lib/lib2.module.ts

并且它找不到它.

我尝试了什么:

1. peerDependency
2. 它添加到tsconfig.lib作为paths
3. 包括它作为直接路径(在--prod构建中失败)

更新

如果我打造集主要路径tsconfig.json,以

"paths": { "lib1": [ "dist/lib1" ],

其他库可以导入它没有问题但是它不能再导入app.module

我是Angular应用程序的新手.我需要一个建议来实现与Angular6(SPA)的SSO集成.我没有在网上获得完整教程的任何内容.

基本上,我是一个PHP开发人员,我做了与PHP应用程序的SSO集成.由于Angular6是UI,我不知道如何使用Angular6管理秘密和重定向以及其他事情.

所以如果有人建议我实施Angular6和SSO集成的步骤(或Github样本)会更好,那么最好的方法是什么？

我正在使用角度6,消耗休息api,后端是laravel php.没有令牌,如果您已登录,则会获得x会话,您可以在邮递员标题中看到它

X-Session ?1948c514b7e5669c284e85d6f612f9bd491
X-Session-Expiry ?2038-08-02T09:19:03+00:00

如何检查x-session和X-Session-Expiry角度的值？在api endpoind中没有任何与session相关的内容.我需要知道会话是否仍然打开以及会话何时到期,我需要将用户注销.

登录时可以从角度访问这些x会话值吗？它们存储在标题中吗？

服务

  login(username, password) {
    const data = {
      username: username,
      password: password
    };
    const headers = new HttpHeaders();
    headers.set('Content-Type', 'application/json');
    localStorage.setItem('headers', JSON.stringify(headers));
    return this.http.post(this.login_url, data, { headers: headers });
  }

我试图向用户服务提供相同的会话

  getUsers() {
    const headers = JSON.parse(localStorage.getItem('headers'));
    return this.http.get(this.users_url, { headers: headers });
  }

但它不起作用,我没有得到任何用户,是否有解决方案？

我在子表单组件中有一个按钮,在from父组件中,我想在子组件中单击onClose()函数时将函数推送到子组件.我已经尝试了下面的方法,但问题是它将在第一个表单上工作,但不会在其余表单上工作.我也想传递其他功能,包括onSubmit.对我来说,我需要弄清楚我在这里做错了什么.我已经在这几天了,现在任何帮助都表示赞赏.谢谢

child form component, in the template url it contains the button for Onclose()

import { Component, OnInit, NgModule, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators, AbstractControl,  ValidatorFn,Form } from '@angular/forms';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

@Component({
    selector: 'app-editgraphs',
    templateUrl: './editgraphs.component.html',
    styleUrls: ['./editgraphs.component.scss']
})
export class EditgraphsComponent implements OnInit {
    @Input() eGraphtitle: string;
    @Output() close: EventEmitter<any> = new EventEmitter();
    graphDataForm: FormGroup;
    constructor(private fb: FormBuilder,){}
    ngOnInit(): void {
     this.graphDataForm = this.fb.group({
    sDepartment: new FormControl(null, …

我一直在将我的应用程序从4迁移到6,我无法为我的e2e测试执行我的代理脚本.脚本列表如下所示:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start:tst1": "ng serve --proxy-config config/proxy/proxy.tst1.json",
    "start:tst5": "ng serve --proxy-config config/proxy/proxy.tst5.json",
    ...
    "test:watch": "ng test",
    "lint": "ng lint --type-check true",
    "e2e": "ng e2e",
    "e2e:tst1": "ng e2e --proxy-config config/proxy/proxy.tst1.json",
    "e2e:tst5": "ng e2e --proxy-config config/proxy/proxy.tst5.json",
  },

我不明白的是,启动命令(ng serve)工作得非常好npm run start:tst5.但是,当我尝试执行e2e测试时,npm run e2e:tst5它会抛出错误:Unknown option: '--proxyConfig'.

我的angular.json中的配置如下所示:

angular.json

...
"lmsbo-bo-e2e": {
  "root": "e2e",
  "sourceRoot": "e2e",
  "projectType": "application",
  "architect": {
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": { …

在我的角度应用程序(使用角度材料)我有一个过滤器面板,我想除了选择能够自动完成(用户输入值,它发送到后端,由此$ regexp查询我们在MongoDB集合中找到匹配).但要做到这一点,我需要手动将服务注入过滤器组件.我没有找到任何关于如何做的信息.

我需要这样的东西:

if (filters.serviceName) {
  injector.inject(serviceName);
}

injector.get(serviceName).find(searchQuery);

可能吗？谢谢.

Angular Material CDK树组件文档说:

"平面树通常更容易进行样式和检查.它们对滚动变化也更友好,例如无限或虚拟滚动 "

有关如何将虚拟滚动应用于CDK平面树的任何想法？

我有一个巨大的树来渲染,现在它很慢,当我递归打开所有节点时它会崩溃

我试过<cdk-virtual-scroll-viewport> @ angular/cdk-experimental但是没弄清楚如何将它与树组件集成

我需要使用管道在Angular 6中创建一个搜索表单,并且必须将多个参数传递给管道.

nameSearch,emailSearch,roleSeach,accountSearch

 <tr *ngFor="let user of data | searchuser: nameSearch" ></tr>

这是我的烟斗:

@Pipe({
  name: 'searchuser'
})
export class SearchuserPipe implements PipeTransform {

  transform(users: IUser[], nameSearch: string): IUser[] {
    if(!users) return [];
    if(!nameSearch) return users;

    nameSearch=nameSearch.toLocaleLowerCase();
    return users.filter(item=>
      {
         return item.desplayName.toLocaleLowerCase().includes(nameSearch)
      });
  }

请指导我如何使用多参数创建管道搜索.

编辑:

  transform(users: IUser[], nameSearch: string ,eamilSearch:string,roleSearch:string): IUser[] {
if(!users) return [];
if(!nameSearch) return users;
if(!eamilSearch) return users;
if(!roleSearch) return users;

nameSearch=nameSearch.toLocaleLowerCase();
return users.filter(item=>
  {
      item.desplayName.toLocaleLowerCase().includes(nameSearch),
      item.email.toLocaleLowerCase().includes(eamilSearch),
      item.description.toLocaleLowerCase().includes(roleSearch)          
  });
}