标签: angular5

运行时,我得到的问题ng server或ng serve --live-reload=true.下面是我在终端上运行这些命令时遇到的问题.

__PRE__

请帮我.我坚持这个问题.

提前致谢.

我正在尝试实现一个图标,单击该图标会将变量保存到用户的剪贴板.我目前已经尝试了几个库,但没有一个能够这样做.如何在Angular 5中将变量正确复制到用户的剪贴板？

提前致谢

我已经在标题中添加了CORS,但我仍然在我的请求中收到了CORS问题.在标头中添加和处理CORS和其他请求的正确方法是什么？

这是服务文件代码:

import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
const httpOptions = {
  headers: new HttpHeaders({ 
    'Access-Control-Allow-Origin':'*',
    'Authorization':'authkey',
    'userid':'1'
  })
};

public baseurl = 'http://localhost/XXXXXX';

userAPI(data): Observable<any> {
  return this.http.post(this.baseurl, data, httpOptions)
    .pipe(
      tap((result) => console.log('result-->',result)),
      catchError(this.handleError('error', []))
    );
}

错误:

对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:4200 '访问

失败:(未知网址)的Http失败响应:0未知错误

在我的服务器端代码中,我在索引文件中添加了CORS.

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

我正在使用Angular 5进行前端应用程序,我需要隐藏一个搜索框,但点击一个按钮,搜索框将显示并设置焦点.

我已尝试使用指令左右的stackoverflow中找到的几种方法,但没有运气.

以下是示例代码:

@Component({
   selector: 'my-app',
   template: `
    <div>
    <h2>Hello</h2>
    </div>
    <button (click) ="showSearch()">Show Search</button>
    <p></p>
    <form>
      <div >
        <input *ngIf="show" #search type="text"  />            
      </div>
    </form>
    `,
  })
  export class App implements AfterViewInit {
  @ViewChild('search') searchElement: ElementRef;

  show: false;
  name:string;
  constructor() {    
  }

  showSearch(){
    this.show = !this.show;    
    this.searchElement.nativeElement.focus();
    alert("focus");
  }

  ngAfterViewInit() {
    this.firstNameElement.nativeElement.focus();
  }

搜索框未设置为焦点.我怎样才能做到这一点？谢谢.

我试图在Angular 5上进行自定义验证,但我面临以下错误

Expected validator to return Promise or Observable

我只想在表单中返回错误,如果值与所需的值不匹配,那么我的代码是:

这是我的表单所在的组件

  constructor(fb: FormBuilder, private cadastroService:CadastroService) {
    this.signUp = fb.group({
      "name": ["", Validators.compose([Validators.required, Validators.minLength(2)])],
      "email": ["", Validators.compose([Validators.required, Validators.email])],
      "phone": ["", Validators.compose([Validators.required, Validators.minLength(5)])],
      "cpf": ["", Validators.required, ValidateCpf]
    })     
   }

此代码在我想要实现的验证的文件中:

import { AbstractControl } from '@angular/forms';

export function ValidateCpf(control: AbstractControl){
    if (control.value == 13445) {
        return {errorCpf: true}
    }
    return null;
}

有人能帮我吗？这种类型的验证只适用于observables,还是我能做到而不是一个承诺或可观察的？谢谢

我最近在@ngrx/store学习Angular 6,而其中一个教程是使用@ngrx/store进行状态管理,但我不明白在场景后面使用@ngrx/store的好处.

例如,对于简单的登录和注册操作,以前通过使用该服务(让我们称之为AuthService),我们可以使用它来调用后端api,在AuthService中存储"userInfo"或"token",将用户重定向到"HOME"在我们需要通过使用DI获取userInfo的任何组件中注入AuthService,只需要一个文件AuthService处理所有内容.

现在,如果我们使用@ngrx/store,我们需要定义Action/State/Reducer/Effects/Selector,它可能需要写入4或5个文件来处理上述动作或事件,然后有时我们还需要调用backend api使用服务,这看起来要复杂多余......

在其他一些场景中,我甚至看到一些页面使用@ngrx/store来存储对象或对象列表,如网格数据.,是对某种内存存储使用情况的？

回到这个问题,为什么我们在Angular项目中使用@ngrx/store而不是服务注册存储？ 我知道这是用于" 国家管理 "的用法,但究竟什么是"国家管理"？这是什么类似事务日志,我们什么时候需要它？我们为什么要在前端管理它？请随时在@ngrx /商店区分享您的建议或经验!

我正在使用最新的Angular5构建应用程序,我需要的是用户能够切换语言.我从来没有在Angular2 +中实现它(实际上我使用的是Angular5).

我需要在两个地方设置翻译:

• 组件的模板html - 将标签更改为指定的语言
• 在component.ts文件的代码中 - 我可能需要翻译一些在代码中的特定条件下动态构建的字符串

我正在寻找ngx-translation,它看起来可以做我需要的一切,因为它允许你在不重建代码的情况下更改语言,请参阅此处.但是我读到它可能会被弃用,因为主要开发人员转向角度团队来开发他们的i18n代码.

我也明白,目前的i18n并不支持我现在需要的一切,请看这里.

我的问题 - 在最新版本的Angular中翻译的状态是什么？是否还有其他人推荐的图书馆,如果确实如此,Angular本身还没有完全支持(用于更改语言而不重新编译)？ngx-translate对未来有益吗？

非常感谢在这方面的任何指导!

我在Angular 5.2.5应用程序中使用Angular-CLI 1.6.6和@ angular/service-worker 5.2.5.除了在我们的生产环境中弹出一条错误消息外,一切在本地lite-server和生产服务器上都能正常工作:

Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

查看ngsw-worker.js脚本,我发现上面生成错误消息的行(2466):

async safeFetch(req) {
    try {
        return await this.scope.fetch(req);
    }
    catch (err) {
        this.debugger.log(err, `Driver.fetch(${req.url})`);
        return this.adapter.newResponse(null, {
            status: 504,
            statusText: 'Gateway Timeout',
        });
    }
} 

catch中的控制台日志记录错误会发出以下错误:

TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
    at Driver.safeFetch (ngsw-worker.js:2464)
    at Driver.handleFetch (ngsw-worker.js:1954)
    at <anonymous>

与此问题相关的错误:导致'ServiceWorkerGlobalScope'上执行'fetch'失败的原因:'only-if-cached'只能设置为'same-origin'模式错误？

生成此错误的req是应用程序的任何首次访问:

https://example.com/test/#/connect
https://example.com/test/#/map?token=[accestoken]
...

在应用程序重新加载时,错误不会重复.

有人可以帮帮我吗？服务工作者的safeFetch()中是否存在错误(可能支持HashLocationStrategy)？我必须在配置中更改任何内容吗？

我正在触发HTTP请求,我从中得到了有效的回复.响应还有一个我希望阅读的标题X-Token.我正在尝试下面的代码来读取标题,但是,我得到null作为结果

this.currentlyExecuting.request = this.http.request(reqParams.type, reqParams.url, {
    body: reqParams.body,
    responseType: 'json',
    observe: 'response'
}).subscribe(
    (_response: any) => {
        // Also tried _response.headers.init();
        const header = _response.headers.get('X-Token');
        console.log(header);
        onComplete(_response.body);
     },
    _error => {
        onComplete({
            code: -1,
            message: Constants.WEBSERVICE_INTERNET_NOT_CONNNECTED
        });
    }
);

X-Token在Chrome检查中检查时,响应显示标题存在.尝试在StackOverflow上查看几个相关问题,但没有任何帮助.

如何更新Angular 5？这是我的package.json:

"dependencies": {
    "@angular/animations": "5.0.0",
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/router": "5.0.0",
    "@types/jwt-decode": "^2.2.1",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "jwt-decode": "^2.2.0",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
},
"devDependencies": {
    "@angular/cli": "1.4.0-rc.2",
    "@angular/compiler-cli": "5.0.0",
    "@angular/language-service": "5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-ide": "^0.9.31",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": …