标签: angular5

我正在使用 Angular Router，并且我试图通过 id 链接到另一个路由中的子组件。基本上通常会使用<a href="www.url.com/profile/#profile-header-id">.

我不确定 Angular 路由器是否有内置的方法来做到这一点，但如果没有，也许我可以在稍后知道元素已呈现时手动触发链接。

问题不在于链接到另一条路由，这当然是通过 Angular 路由器的 Link 完成的。问题是链接到在链接组件的呈现 HTML 中找到的元素。

不那么抽象的代码示例：

所以假设我在 app.module.ts 文件中的路由器是

`const routes = [
  { path: '', component: HomeComponent},  
  { path: '#section3', component: HomeSection3Component}, 
  { path: 'B', component: BComponent}, 
];`

现在在组件 OtherComponent 中，我想要一个链接，它不仅可以将我带到主页路由 ' '，还可以滚动到 id #section3 的元素，从而跳过所有不相关的内容。

我的主页组件为页面的每个部分都有嵌套的组件。每个部分/组件都有一个 id。

主页.component.html

`<main>
     <app-section1></app-section1>
     <app-section2></app-section2>
     <app-section3></app-section3>
</main>`

但是，当单击<button routerLink="#section3">Go to homepage section 3</button>B 页面上的按钮时，我只能看到一个空白页面。

我正在将 Dynamic Web Twain javascript 库合并到我的 angular 应用程序中，以允许我的最终用户使用 Web 浏览器而不是桌面应用程序进行扫描。

加载页面后，立即弹出进度条。这不是预期的行为，在我使用 angular 4 时也不会发生。我在工作中使用 angular 5。我使用哪种浏览器（IE、Chrome、Firefox）也没有区别。

我的 Angular 版本是：

> Angular CLI: 1.6.6 Node: 9.4.0 OS: win32 x64 Angular: 5.2.3 ...
> animations, common, compiler, compiler-cli, core, forms ... http,
> language-service, platform-browser ... platform-browser-dynamic,
> router
> 
> @angular/cli: 1.6.6 @angular-devkit/build-optimizer: 0.0.42
> @angular-devkit/core: 0.0.29 @angular-devkit/schematics: 0.0.52
> @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.9.6
> @schematics/angular: 0.1.17 typescript: 2.5.3 webpack: 3.10.0

我已使用以下命令将 javascript 库包含到我新创建的 Angular 项目中：

npm install dwt --save
npm …

我有一个简单的类，它将checked变量定义为布尔值。然后我的组件有一个这些对象的数组，HTML 显示了每个对象。

<tr *ngFor="let element of filteredElements">
    <td>
      <input type="checkbox" [checked]="element.checked" (change)="onCheckChanged(element)">

现在我想添加一个显示值，告诉我在任何给定点检查了多少项。我不确定如何让组件“监视”所有这些元素。我可以checked从许多不同的地方更改 的值。

我觉得我在这里需要某种类型的 Observable，但不知道如何实现。

我是 Angular 5 的新手。
我已经为外部 JS 库创建了指令。
但是在同一个指令中，我将值绑定到属性。

我试图起诉ngAfterViewInit以检测是否所有值都绑定到该属性，然后调用 jQuery 插件。

但是我只找到了组件的生命周期钩子。我可以在指令中使用那些吗？这是一个不错的选择吗？

<div *ngFor="let item of easypiechartOptions"
    [option]="item"
    appEasyPieChart
    [attr.data-percent]="item.percent">
</div>

如果我不使用ngAfterViewInit，那么当我调用 jQuery 插件时，这些值不会被绑定。
如果我使用它，当我调用 jQuery 插件时，属性值就准备好了。

有没有办法在 Angular 5 中为自定义路径使用命名空间？目前我使用

import { AuthService } from './../../modules/auth/auth.service';

我想要实现的是使用@module或自定义@name特定路径。代码应如下所示，可用于每个文件夹级别

import { AuthService } from '@modules/auth/auth.service';

在我的 Angular 5.2 应用程序中，配置文件有两个页面：Details和Activity。任何配置文件的默认页面都是Details，因此路由设置如下（文章末尾的路由器配置的完整 Typescript 示例）：

{ path: 'profile/:id', component: ProfileComponent,
  children: [
    { path: 'details', component: ProfileDetailsComponent },
    { path: 'activity', component: ProfileActivityComponent },
    { path: '**', component: ProfileDetailsComponent }
  ]
}

ProfileComponent处理两个个人资料页面的根。它有一个页面标题和一个导航栏，并包括一个<router-outlet>用于配置文件详细信息/活动组件的元素（根据上面的路由加载）。它的 HTML 如下所示：

<div> <!-- some header stuff --> </div>

<nav>
  <ul>
    <li><a routerLinkActive="active" routerLink="./details">Details</a></li>
    <li><a routerLinkActive="active" routerLink="./activity">Activity</a></li>
  </ul>
</nav>

<div class="page-content">
  <!-- ProfileDetailsComponent or ProfileActivityComponent will be loaded here -->
  <router-outlet></router-outlet>
</div>

正如您所看到的，active当我在正确的页面上时，我正在使用 …

我正在尝试映射 httpclient 的结果，我们需要使用 RxJs 的新导入来使 treeshaking 工作。

所以我找到了 2 张地图，但都没有用...

import { map } from 'rxjs/operator/map'; 
import { map } from 'rxjs/operators/map';

我们需要删除的旧时尚方式

import 'rxjs/add/operator/map';

这是我开始工作所需的代码！

  getValues(): Observable<Value[]> {   
    return this.http.get<Response<Values>>(this.url).map(reponse => {
      return reponse.data.values;
    });
  }

但 .map 并不以可观察性而闻名，

我有一个angular5服务,它执行HTTP get并返回一个特定类型,如下所示

public getProductByIDproductId: string): Observable<Product> {
    const headers = new HttpHeaders({ "Content-Type": "application/json" });
    const url = `${environment.productservice_baseurl}/${productId}`;
    return this.http
      .get<Product>(url, { headers: headers })
      .pipe(       
        tap(data => (this._product = data)),
        catchError(this.handleError)
      );
  }

Product类是一个具有属性和方法的类.下面有一小段摘录.

class Product{
    productID:string;
    productName:string;

    setQuantity(quantity:number){

    }
}

当我在get上返回this._product上调用setQuantity函数时,我得到'setQuantity不是函数'错误.当我尝试检查this._product的实例时,它不是Product类型,而是类型Object.

在get方法上设置的泛型类型是否仅用于帮助编译时类型检查？如何从getProductByIDproductId方法获取产品类的具体实例？

我有一个公司类，它有一个总部的地址字段。地址是一个接口，它有另一个对象，国家，这是另一个接口。在我的数据库中，我存储了所有国家。我有一个编辑选定公司的视图，在那里我可以设置或更改总部的地址，并为国家/地区创建了一个 mat-select：

<mat-select [(ngModel)]="company.headquarter.country">
    <mat-option *ngFor="let country of companyService.countries" [value]="country">
        {{country.name}}
    </mat-option>
</mat-select>

此代码将所选国家/地区保存到总部的国家/地区字段，但如果我想编辑同一家公司，则 mat-select 不会显示实际值。我怎么解决这个问题？

编辑：

如果我将 ngModel 更改为 company.headquarter.country.id 并将 [value] 更改为 country.id，那么它可以正常工作，但是要存储国家/地区的代码或名称，我必须编写一个方法，该方法将通过在 companyService.countries 数组中输入 id 并将这个国家设置为 company.headquarter.country 的字段。所以这不是一个好的解决方案。

<div class="posts">    
   <div class="post">
      <div>post content</div>
    <a class="comment">Comment</a>

    <textarea [(ngModel)]= "model.text" class="comment-text" name="text"></textarea>
    </div>

    <div class="post">
       <div>post content</div>
    <a class="comment">Comment</a>

    <textarea [(ngModel)]= "model.text" class="comment-text" name="text"></textarea>
    </div>
</div>
...

我想在“a”点击时将焦点设置在 textarea 上。谁能帮帮我吗。我正在使用角度 5