标签: angular5

所以我有这个 Angular 5 应用程序，它使用aes256NPM 的库来加密登录表单的密码。那个aes256图书馆里面有var crypto = require('crypto'). 当我运行我的应用程序并尝试登录表单时，我遇到了crypto.createHash is not a function错误。当我调试我的应用程序以找出问题所在时，我发现那var crypto只是一个空对象。 crypto.createHash 不是函数 crypto - 空对象

我想以角度动态加载子组件。父组件将根据某些条件加载子组件。

我们是否可以在父组件打字稿文件中定义子组件名称，并在 HTML 中使用字符串插值来加载组件？

例如在父组件打字稿中：

componentName = someCondition ? 'component1' : 'component2';

在 HTML 中

<app-{{componentName}}></app-{{componentName}}

我尝试过这个，但它不起作用。对此有任何帮助将不胜感激！

在我的 Angular 应用程序中，我在输入字段中显示从 API 到组件的数据。

所有字段都已填充，但日期类型的输入元素未填充

下面是 html 标记

<input [(ngModel)]="CustomerVM.customer.CustomerDob" type="date" name="MemberDateOfBirth" class="form-control" 
          (blur)="Calculate_Age(CustomerVM.customer.CustomerDob)">

在控制台中它说

指定值“2018-09-21T00:00:00”不符合所需的格式“yyyy-MM-dd”。

我做了一个通用函数来将服务中的日期格式化为

FormatDate(iDate: Date) {
var inputDate:Date= new Date(iDate);
var formattedDate = new Date(inputDate.getUTCDate(), (inputDate.getUTCMonth() + 1), inputDate.getUTCFullYear());
return formattedDate;

}

和

this.CustomerVM.customer.CustomerDob = this.Helper.FormatDate(this.CustomerVM.customer.CustomerDob);

但它不显示日期字段中的值

在插值块内，我们可以使用管道格式化值

{{DOB | date:'mediumDate'}}

我们也可以用 ngModel 来做这个吗？因为我不想要一种格式化它的方法。

我怎样才能做到这一点？

我有一个针对不同组件但有一些按钮的通用模板。因此，我创建一个通用组件并使用 ng-template 更改此按钮：

<component-common 
       [buttonTemplate]="buttonTemplate">
</component-common>

<ng-template #buttonTemplate let-element="element" let-method>
  <button (click)="method">
        element.name              
  </button>
</ng-template>

在组件common.component.ts中：

export class ComponentCommonComponent {

   @Input() buttonTemplate: TemplateRef<any>;

   constructor() { }

   test() {
      console.log("test called");
   }
}

并在html中：

<ng-template 
    *ngTemplateOutlet="buttonTemplate;context: {method: test(), element:element}">
</ng-template>

我发现的问题是“test”一直被调用，而我只想在单击时调用它，我错过了什么？

通过服务发出事件的正确方法是什么？我已经读到声明EventEmitter在服务中它不适合。

我想实现以下目标。

我的根组件中有 2 个组件，当我单击第一个组件时，我想知道第一个组件在第二个组件中被单击。

我有两张桌子.

我想将一个表的列的宽度设置为等于另一个表的列的宽度.

像这样 :

    <table class="table-header table">
        <thead class="table-bordered">
          <tr>
              <th>Name</th>
              <th>Last Name</th>
              <th>Gender</th>
              <th>Education</th>
            </tr>
        </thead>
      </table>

另一张桌子:

          <table class="table-header table">
         <thead class="table-bordered">
          <tr>
              <th>Name</th>
              <th>Last Name</th>
              <th>Gender</th>
              <th>Education</th>
            </tr>
        </thead>
      <tbody> 
         <tr> 
            <td> Ross </td>
             <td> Ross </td>
            <td> M</td>
            <td> BsC </td>
        ..
      </tbody>

我想要做的是让第一个表的所有标题始终等于第二个表的标题宽度.因为在第二个表格上,他们会根据内容调整大小.

所以我知道我可以添加一个HostListener('window:resize')但是如何在Angular中分配这些值呢？所以他们总是一样的.好像它是彼此的重复.任何指导？

我有这个FormGroup

defaultIdNumberValidator = [Validators.required, Validators.minLength(6),
    Validators.maxLength(11)];

this.registerForm = this.formBuilder.group({ 
  permissions: this.formBuilder.group({
    country: ['', [Validators.required]],
    identityNumber: [null, this.defaultIdNumberValidator],
  }, {validator: [this.validateId]}) 
});

我想identityNumber根据this.validateId方法中的某些条件清除并添加验证器。

validateId(input: AbstractControl) {
  if(condition) {
    input.get("identityNumber").clearValidators(); //this is working
  }
  if(condition) {
    input.get("identityNumber").setValidators(this.defaultIdNumberValidator); //not working
  }
}

当setValidators方法被调用时，我得到这个错误（行：109是setValidators被调用的行）

ERROR TypeError: Cannot read property 'defaultIdNumberValidator' of undefined
    at RegisterComponent.validateId (register.component.ts:109)
    at eval (forms.js:742)
    at Array.map (<anonymous>)
    at _executeValidators (forms.js:742)
    at eval (forms.js:694)
    at eval (forms.js:742)
    at Array.map (<anonymous>)
    at _executeValidators (forms.js:742) …

我是新手，使用Angular HttpClient（也写英文）

我有一个问题，我正在尝试使用POST方法发送HTTP请求，以便协商OAuth令牌阻塞，但是angular发送OPTIONS请求：

服务：

login(username: string, password: string) {
const body = `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&grant_type=password`;

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': 'Basic ' + btoa(TOKEN_AUTH_USERNAME + ':' + TOKEN_AUTH_PASSWORD)
  })
};  


return this.http.post<string>(AuthenticationService.AUTH_TOKEN, body, httpOptions);

结果：

对于我的后端，我使用的是Spring Security，并且添加了一个过滤器以允许CORS：

@Bean
public FilterRegistrationBean corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
    bean.setOrder(0);
    return bean;
}

首先，我对Angular 5+项目中此类文件的潜在存在一无所知。我有一个正在运行的Angular 5项目，其中没有此manifest.json文件。我决定添加服务工作者工具，以提高应用程序的性能。服务人员没有被激活，我对此问题进行了一些研究，发现以下开放的github问题，其中一些人提到他们使用manifest.json解决了该问题。这是什么文件 为什么它不能成为Angular CLI配置的一部分？在什么条件下您需要一个？潜在的文件在哪里？

我在Angular5中使用typescript创建了getter-setter,如下所示: -

  private _locations: Array<string> = [];

  constructor() { }

  /**
   * Getter locations
   * @return {Array<string>}
   */
  public get locations(): Array<string> {
    return this._locations;
  }

  /**
   * Setter locations
   * @param {Array<string>} value
   */
  public set locations(value: Array<string>) {
    this._locations = value;
  }

当我尝试访问方法位置时

this.signUpService.locations();

我收到一个错误: [ts] Cannot invoke an expression whose type lacks a call signature. Type 'string[]' has no compatible call signatures.