标签: angular5

我收到一条警告，指出全球化已被弃用，并且有一个指向https://cordova.apache.org/news/2017/11/20/migrate-from-cordova-globalization-plugin.html的信息链接。

但我不明白如何在 Ionic 中使用它，如何在 Angular 5 中导入导航器？

在以下存储库中：

https://github.com/napolev/lab-nginx-angular/tree/nasiruddin-suggestions

我有3个元素

1. nginx服务器
2. 香草角app1
3. 香草角app2

app2是一个克隆app1

我正在使用Windows 10操作系统与Cygwin.

要试用该系统，请打开 3 个终端窗口并执行以下操作：

$ mkdir lab-nginx-angular
$ cd lab-nginx-angular
$ git clone https://github.com/napolev/lab-nginx-angular .
$ git checkout nasiruddin-suggestions
---
$ cd nginx
$ ./nginx.exe
---
$ cd app1
$ ng serve
---
$ cd app2
$ ng serve

内部文件：.angular-cli.json我有以下内容（例如app1：）：

{
  ...
  "defaults": {
    "styleExt": "css",
    "component": {},
    "serve": {
      "host": "app1.example.com",
      "port": 4201
    }
  }
  ...
}

app1 …

我正在尝试将查询参数（而不是路由参数）传递给我的每一条辅助路由。

我想要实现的目标是拥有 3 个兄弟组件，每个组件都从其自己的辅助路由中订阅和使用查询参数，并使用 3 个不同的数据源填充我的页面，使分页/查询成为可能，并且每个数据源都是独立的。

我的 url 应如下所示，遵循 Angular 的辅助路由模式：

http://mywebsite.com/search(音乐:/?page=1&itemsPerPage=12&orderBy=createdAt/movies:/?page=1&itemsPerPage=12&orderBy=createdAt/tvShows:/?page=1&itemsPerPage=12&orderBy=createdAt)

然后，在我的每个组件中，我都可以订阅它的特定辅助路由更改，并在导航时触发对我的 API 的请求。

我知道这可以通过路由参数实现，但我希望能够灵活地仅输入所需的查询参数。这可以在 Angular 中实现吗？

谢谢！

我允许用户动态创建输入字段。对于每个输入字段，我想将其连接到不同的 mat-autocomplete，以便它们彼此独立工作。我在这里遇到了障碍，因为我无法动态创建将自动完成连接到输入的元素引用（此处为#auto）。我该如何实现这一目标？

<div
  class="row"
  *ngFor="let field of getControls('requestFields'); let i = index"
  formArrayName="requestFields"
>
  <ng-container [formGroupName]="i">
    <div class="col-md-4">
      <mat-form-field class="example-full-width">
        <input
          type="text"
          placeholder="Name"
          matInput
          formControlName="reqName"
          matAutocomplete="auto"
        />
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option
            *ngFor="let option of (filteredColumns | async)"
            [value]="option"
          >
            {{ option }}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </div>
    <div class="col-md-2">
      <div class="togglebutton">
        <label>
          <span>Optional</span>
          <input type="checkbox" formControlName="reqOption" />
          <span class="toggle"></span>
        </label>
      </div>
    </div>
    <div class="col-md-4">
      <mat-form-field>
        <input
          matInput
          formControlName="reqValidations"
          placeholder="Validation"
          type="text"
        />
      </mat-form-field>
    </div>
  </ng-container>
</div>

我有一个端点，它根据某些参数为我提供图像。这不是一个图像网址，而是一个普通图像。因此，当我到达邮递员中的端点时，作为响应，我收到一张图像（JPG）。

我是否可以在变量中接收该图像并将其绑定到 HTML 标签中？

所有问题都有将图像 url 映射到图像的解决方案，而我的是必须在 UI 中显示的图像。

显示图像组件.ts

this.appservice.getImage().subscribe((image) => {
    console.log(image);
 }
)

服务.ts

getImg() {

 return this.httpClient.get('xyz.com', {headers: this.httpHeaders});

 }

我应该如何在 HTML 上显示图像变量中收到的图像？

我对 Angular 5 完全陌生，我想在应用程序打开时显示登录页面。

现在我显示 appComponent，它有工具栏和侧面导航栏。但是当用户加载应用程序时，如果登录成功，我想显示登录屏幕，那么只有用户应该允许查看主页。

如果我将我的应用程序组件作为登录组件，我无法根据用户的菜单选择在主页中加载不同的组件。

应用程序组件.html

<mat-sidenav-container fullscreen>
    <mat-sidenav #sidenav class="app-sidenav">
        <mat-nav-list>
            <a mat-list-item routerLink="/home" routerLinkActive="active-list-item">
                <h2 matLine>Home</h2>
                <mat-icon matListIcon>home</mat-icon>
            </a>
            <a mat-list-item routerLink="/account" routerLinkActive="active-list-item">
                <h2 matLine>Account</h2>
                <mat-icon matListIcon>person</mat-icon>
            </a>
            <a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">
                <h2 matLine>Settings</h2>
                <mat-icon matListIcon>settings</mat-icon>
            </a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary" class="mat-elevation-z3">
            <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
      My App
    </mat-toolbar>
    <div class="app-content">
      <router-outlet></router-outlet>  // router-outlet
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

目前，当我运行应用程序时，正在加载此页面。我想显示全屏登录页面，而不是首先显示主页。

const  routings: Routes = [
    {path:'',redirectTo:'/app-root',pathMatch:'full'},
    {path:'home',component:HomeComponent},
    {path:'account',component:AccountComponent},
    {path:'settings',component:SettingsComponent},
    {path:'**',redirectTo:'/app-root',pathMatch:'full'},
];

目前，当 url 为 ' ' …

我希望如果任何 api 返回 401 错误响应，用户就会自动注销。为此，我拦截每个请求，一旦错误代码出现 401，我就会清除本地存储中的 jwt 令牌，并且身份验证防护会阻止但是在实现拦截器之后（这方面的示例非常少，并且文档中也没有提及），我无法命中任何 HTTP 请求。下面是我的代码。提前致谢。

import { Injectable, Injector } from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse} from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/throw'
import 'rxjs/add/operator/catch';

@Injectable()
export class ResponseInterceptor implements HttpInterceptor {

    constructor() {
    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        return next.handle(request).do((event: HttpEvent<any>) => {
        }, (err: any) => {
            if (err instanceof HttpErrorResponse) {
                // do error handling here
                console.log('and the error is ');
                console.log(err)
            }
        });
    } …

我有一个 Angular5 应用程序，其结构如下：

页眉、页脚和侧边栏组件放置在Shared --> Components下。Header 和 SideBar 组件导入服务SideBarService（在 Shared 文件夹下）。当用户单击 Header 组件中的侧边栏图标时，SidebarService 用于切换应用于侧边栏组件的类。

我的问题是：根据 Angular 5 应用程序架构，页眉、页脚和侧边栏应该放置在共享模块还是核心模块中。由于我的应用程序具有延迟加载模块，因此将来是否会导致问题，例如如果一个延迟加载模块（例如管理员使用侧边栏服务在侧边栏中进行更改），此更改对其他延迟加载模块是否可见？

原屏，

您好，我可以拉伸图表并增加宽度，但是一旦我点击按钮将宽度缩小到原始状态；图表未调整大小。它仍然使用扩展尺寸

上面是重叠图表的屏幕截图。请任何人帮忙。

我正在尝试将 ng-prime 中的 p-calendar 与 ngmodel 结合使用来绑定来自服务器的日期

 <p-calendar [(ngModel)]="selectedDate"
             [locale]="es"
             [hidden]="!editing"
             dateFormat="d/mm/yy"
             appendTo="body"
             class="pos-cal mar-left-txt"
             [(ngModel)]="currentUserData.person.dateOfBirth">
 </p-calendar>

 <p [hidden]="editing">
     {{currentUserData.person.dateOfBirth | date: 'dd/MM/yyyy'}}
 </p>

这段代码做了我想要的事情，我只是有一个问题。我已将所选日期设置为今天，但这不是我希望用来显示的日期。我想在 p-calendar 上显示出生日期

当我从日历中选择一个日期时，它会绑定到该段落，通常我只会使用管道，但它不起作用