标签: angular5

我的 Angular 应用程序 data.js 中有一个 js 文件。这个 js 文件中声明了一些变量，如下所示。

 var data = 'test'

现在我必须在我的组件 (app.component.ts) 中访问这些变量及其值。

我读了一些将它们声明为导出使它们成为模块并且可以在任何地方访问的地方，但我不确定如何做到这一点。

这是我的应用程序的结构。我在assets->js文件夹中有data.js。我需要修改app.component.ts中的变量值。

我对 Angular 很陌生。这甚至可能吗？

我对浏览器制作的基本身份验证弹出窗口有问题。尽管有 Angular 中的登录表单，但在输入凭据并单击登录按钮后，浏览器会创建基本身份验证弹出窗口。当我登录浏览器弹出窗口时，一切正常。在每个请求中都有这些标头：

private createLoginHeaders(email: string, password: string): Headers {
    let headers: Headers = new Headers();
    headers.append("Authorization", "Basic " + btoa(email + ":" + password));
    headers.append("Content-Type", "application/x-www-form-urlencoded");
    headers.append("X-Requested-With", "XMLHttpRequest");

    return headers;
 }

并且标头应用于此请求：

login(email: string, password: string): Observable<User> {
    let headers = this.createLoginHeaders(email, password);

    return this.http.post<User>(`api/user/secure/current`, {headers: headers}).do(
      (user: User) => {
        this.saveUserToLocalStorage(user);
      }
    ).catch(err => {
      if (err.status === 401) {
        return Observable.throw('Unauthorized');
      }
    });
 }

Do() 函数可以在我得到响应时做一些事情而不改变可观察对象中的任何内容。下面是上面代码的消费者方法：

 login(email: string, password: string) {
    if(!this.authenticationService.isAuthenticated()) {
      this.authenticationService.login(email, password).subscribe(
        () => …

我有一个汽车品牌的下拉列表，我想将所选汽车品牌的价值传递给方法 getCarModelsByBrand(brand)。任何帮助将非常感激。

<div class="form-group">
      <select (change)="getCarModelsByBrand($event.target.value)" class="form-control" id="sel1">
        <option selected="" value="" selected disabled>Pasirinkite</option>
        <option *ngFor="let brand of brands" value=brand>{{brand}}</option>
      </select>
</div>

我想了解如何为现有的 PrimeNG autoComplete 组件应用 CSS。

我正在寻找的变化是，输入文本颜色应该是白色。

HTML 文件 ( top-bar.component.html )

<p-autoComplete styleClass="myclass" [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="20" [minLength]="1"
      placeholder="Search" [dropdown]="true" (keyup.enter)="populateResults($event)">
    </p-autoComplete>

CSS 类（top-bar.component.css）

.myclass .ui-autocomplete .ui-autocomplete-input {
  color: white;
}

组件类（top-bar.component.ts）

@Component({
  selector: 'app-top-bar',
  templateUrl: './top-bar.component.html',
  styleUrls: ['./top-bar.component.css']
})

有人可以帮我吗？

谢谢

我有一个主要的app.routing.module.ts：

 const routes: Routes = [
  { path: 'home',  component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
  ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

然后是几个子路由模块：

const routes: Routes = [
    { path: 'AbcRoute1', component: AbcRoute1Component },
    { path: 'AbcRoute2', component: AbcRoute2Component }
];

@NgModule({
    imports: [ RouterModule.forChild(routes) ],
    exports: [ RouterModule ]
})
export class AbcRoutingModule {}

const routes: Routes = …

我正在尝试使 angular material 2 paginator 组件与 table 组件（mat-table 指令）一起使用。

我按照 mat-table 文档添加了一个分页器，试图使他们的示例与我现有的工作 mat 表一起工作。

在 component.html 中，我有一个工作垫表和一个分页器：

<div class="example-container">
    <mat-table [dataSource]="dataSource">
    // columns and rows
    </mat-table>
    <mat-paginator #paginator
                   [pageSize]="10"
                   [pageSizeOptions]="[5, 10, 20]"
                   [showFirstLastButtons]="true">
    </mat-paginator>
</div>

使用这个 html 的组件实现了 ngOnInit：

ngOnInit() {
    myapi.apirequest()
          .subscribe((dataResponse: any) => {
            this.dataSource = new BasicDataSource(dataResponse);
            this.dataSource.paginator = this.paginator;
            console.log(this.paginator);
          });
      });
  }

组件使用@ViewChild 获取分页器：

@ViewChild(MatPaginator) paginator: MatPaginator;

问题是分页器什么都不做，下一个和上一个按钮是灰色的。

console.log(this.paginator) 给出：

_changeDetectorRef: Object { _view: {…}, _viewContainerRef: null, _appRef: null } ? _displayedPageSizeOptions: Array(3) [ 5, …

我有三条路线，其中一条有警卫保护

app.routing-module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './modules/auth/login/login.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';
import { CustomersComponent } from './modules/customers/customers.component';

import { AuthGuard } from './shared/guards/auth.guard';


const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  { path: 'home', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: 'customers', component: CustomersComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard] …

比如说，我们有另一个名为 help 的文件夹以及 angular 5 应用程序的 index.html 文件。

我想在帮助文件夹中放置一个 help.html 文件，并从 angular 应用程序打开上下文特定链接（使用锚标记中的名称属性）。

我尝试过的是在需要的地方在 angular 应用程序中添加到帮助文件 (help/help.html) 部分的链接。

发生的事情是，该 html 文件的路径被视为在 angular 应用程序中，浏览器正在重定向到 angular 应用程序内。

如何从与部署位置相同的文件夹中的角度应用程序打开静态 html 文件或静态 pdf 文件...

在 Angular 4 中，我试图创建一个嵌套的 for 循环

   <div *ngFor="let p of prop">

    <div *ngFor="let a of p.values">

    Count is  {{count=count+1}} 

如何在模板中创建一个局部变量 count 并在每次执行内循环时增加它。我需要在稍后部分重用这个计数来获取数据，即 Values[count]。姓名....

输出：

计数为 0 计数为 1 计数为 2 计数为 3 计数为 4

我的 utils 服务使用 express 框架从 mysql 数据库返回数据

import { Injectable } from '@angular/core';
import { Http, HttpModule, Headers, RequestOptions } from '@angular/http';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class UtilsService implements OnInit{
    public authData : any[];
    constructor(private http : Http) {
    }

    ngOnInit() { }

    getUserData() {
        const reqData = JSON.parse(localStorage.getItem('AuthUser'));
        return this.http.post('/get/logindata',reqData)
        .map(result => result.json().data);
    }
}

我的组件部分

import { Component, OnInit } from '@angular/core';
import { UtilsService …