小编Ima*_*tti的帖子

我是typescript和angular2/4的新手,我正在构建一个具有两个基本实体的应用程序,即Car和Driver,我所做的就是用API调用列出它们.

我面临的问题是我为每个CarService和DriverService都有代码冗余,而且我可能为其他实体服务提供相同的代码.

到目前为止,实现如下:跳过其他ilustration方法:

@Injectable()
export class CarService  {

private actionUrl: string;
private headers: Headers;

constructor(private _http: Http, private _configuration: Configuration) {

    // Getting API URL and specify the root
    this.actionUrl = _configuration.serverWithApiUrl + 'Car/';

    this.headers = new Headers();
    this.headers.append('Content-Type', 'application/json');
    this.headers.append('Accept', 'application/json');
}

// Function to get all Cars - API CALL: /
public GetAll = (): Observable<Car[]> => {
    return this._http.get(this.actionUrl)
        .map((response: Response) => <Car[]>response.json())
        .catch(this.handleError);
}

// Function to get a Car by specific id - API CALL: …

我有一个包含数据的表,我的最后一个单元格是一个删除按钮,可以删除一行.

我面临的问题是我的行是可点击的,它带我到另一个页面来编辑元素,所以当我点击删除按钮时,它会删除该元素,但也会将我带到编辑页面.

这是我的代码:

<table class="data-table-format">
  <thead>
    <tr>
      <th>id</th>
      <th>Maker</th>
      <th>Model</th>
      <th>Year</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let car of pagedItems" (click)="editCar(car)">
      <th>{{ car.car_id }}</th>
      <td>{{ car.car_maker }}</td>
      <td>{{ car.car_model }}</td>
      <td>{{ car.car_year }}</td>
      <td><i class="material-icons" style="color:red" (click)="deleteCar(car.car_id)">delete_forever</i></td>
    </tr>
  </tbody>
</table>

关于如何用angular /打字稿做任何建议？

我在尝试制作一个可以在文件中找到与此类似的行的正则表达式时遇到了一个糟糕的时刻：

承载 89abddfb-2cff-4fda-83e6-13221f0c3d4f

它应该以 Bearer 开头，后跟空格，后面的标记格式相同：[十六进制，8 个字符]-[十六进制，4 个字符]-[十六进制，4 个字符]-[十六进制，4 个字符]-[十六进制, 12 个字符]

任何帮助将不胜感激

PS：也许只是令牌格式的正则表达式就足以在不记名者不确定的情况下找到令牌

因此，为了清楚地解释我的问题，我的应用程序中的每个实体都有一个组件，例如 Author 组件和 Book 组件。对于它们中的每一个，我将有两个孩子，它们是一个列表组件和一个表单组件。

所以基本上我的路线配置是这样的：

export const routing = RouterModule.forRoot([
    {
        path: 'author', component: AuthorComponent,
        children: [
            { path: 'author-list', component: AuthorListComponent },
            { path: 'author-form', component: AuthorFormComponent }
        ]
    },
    {
        path: 'book', component: BookComponent,
        children: [
            { path: 'book-list', component: BookListComponent },
            { path: 'book-form', component: BookFormComponent }
        ]
    }
]);

例如，在我的 AuthorComponent 中，我有一个方法可以删除调用服务的作者：

deleteBadge = (event): void => {
    // Call delete service
    this._badgeService.delete(event).subscribe(
      result => {
        // Good
      },
      error => {
        // Error
} …

在我的应用程序中，我使用路由器显示了三个组件。

export const routing = RouterModule.forRoot([
   { path: '', component: HomeListComponent },
   { path: 'badge', component: BadgeListComponent},
   { path: 'badge-form', component: BadgeFormComponent },
   { path: 'badge-form/:id', component: BadgeFormComponent }
]);

因为我想/badge/badge-form在 url 中有这样的东西，而不是/badge-form当我转到表单时，我将路由配置更改为：

{ path: '', component: HomeListComponent },
{
    path: 'badge',
    component: BadgeListComponent,
    children: [
        { path: 'badge-form', component: BadgeFormComponent },
        { path: 'badge-form/:id', component: BadgeFormComponent }
    ]
}

不幸的是，它不起作用，我无法找到原因，BadgeListComponent即使我转到/badge/badge-formurl ，它也总是在加载。

BadgeListComponent 的 HTML 代码：

<div class="material-card-wide mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title …