标签: angular11

我正在开发一个 Angular 项目。我首先在项目中添加了 translaService ，一切都很好。所有组件都正确共享该语言。

当我启用延迟加载时，我已按模块划分了我的项目（这是预期的），并且我注意到翻译后的语言不再在模块之间共享。对于翻译，我使用 ngx-translate。

在 app.module 我有这个：

 TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (httpTranslateLoader),
    deps: [HttpClient]
  },
    isolate:false

})

 export function httpTranslateLoader(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
 }

在我的共享模块中我有这个：

 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
 }

 @NgModule({
   declarations: [],
   imports: [
     CommonModule,
     TranslateModule.forChild({
       loader: {
       provide: TranslateLoader,
       useFactory: HttpLoaderFactory,
       deps: [HttpClient]
     },
     isolate: false,
     extend:true
     })
   ]
   ,
   exports:[TranslateModule]
 })
 export class SharedTranslateModule {
   constructor( translate: TranslateService) {
     translate.addLangs(['en', 'fr']);
     translate.setDefaultLang('en');
     translate.use('en');
   } …

我正在将我的应用程序升级到 angular 11 并面临引导程序选项卡的问题

错误：'ngb-tab' 不是已知元素：如果 'ngb-tab' 是一个 Angular 组件，则验证它是否是该模块的一部分。

'ngb-tabset' 不是已知元素：如果 'ngb-tabset' 是一个 Angular 组件，则验证它是否是该模块的一部分。

我正在使用ng-bootstrap v8.0.0和angular 11

我在 app.modules.ts 中导入所需的模块，即

import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

@NgModule({
  declarations: [AppComponent, FullLayoutComponent, ContentLayoutComponent],
  imports: [
    ......
    NgbModule,
    ........
  ],

我ResizeObserver在我的组件中使用过，它工作正常。但是运行ut时出现这样的错误：

    ReferenceError: ResizeObserver is not defined

      133 |             });
      134 |         
    > 135 |         this.resizeObserver = new ResizeObserver((entries) => {
          |                                   ^
      136 |             const entry = entries.find((e) => e.target === this.wrapper._elementRef.nativeElement);
      137 |             if (entry && entry.contentRect) {
      138 |                 if (this.select && this.select.isOpen) {

我使用 TestBed 创建组件：

fixture = TestBed.createComponent(MyComponent);

我不明白为什么会出现这个错误，我只是新建了一个对象。

ts 版本

"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"

谢谢你的帮助！

我想把URL中的#去掉，但是去掉后，部署到服务器上就会出现问题。当页面刷新时，会得到404状态。

例子

https://a/user/（有效）

https://a/user/1（不工作）

应用程序路由.module.ts

    @NgModule({
  imports: [RouterModule.forRoot(routes)],
  providers: [
    {provide: LocationStrategy, useClass: PathLocationStrategy} 
  ],
  exports: [RouterModule]
})

应用程序模块.ts

......
providers: [ Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]

请告诉我我应该做什么。

我的角度应用程序中有两个下拉菜单。第二个是根据第一个下拉值填充的。我正在使用切换映射。只要没有错误就可以正常工作。一旦没有值填充第二个下拉列表并且出现错误，当我更改第一个下拉列表中的值时，不会发生后续调用。我在这里做错了什么吗？

这是我的代码：

private customListItems$ = this.auditFilterService.subjectType$     // this is first option value
  .pipe(
    takeUntil(this.destroy$),
    filter(x => x && x !== ''),
    switchMap((selectedSubjectType) => {
      const result = this.customListsService.getCustomListItemsByTypeName({
        typeName: selectedSubjectType,
        onlyActive: true
      } as CustomListItemsByLocationParams);
      return result;
    }),
    catchError(err => {
      console.log('error', err);
      return of(undefined);
    })
  );

我正在 Angular 11 项目中工作。这个项目中的很多导入都使用相对路径或绝对路径。

我为这个项目设置了 ESLint，我想阻止相对导入路径，只允许绝对路径。但我没有找到这样做的规则。
我发现：no-relative-parent-imports，但它没有给我这样的路径问题：import { HttpService } from "../http/http.service";或import { RouterService } from "../../services/router/router.service";（两者都不是绝对路径，它们的绝对路径分别是import { HttpService } from "app/services/http/http.service";和import { RouterService } from "app/services/router/router.service";。

我读过这篇文章：https : //medium.com/@aayush123/escaping-relative-import-hell-react-native-eslint-atom-57dc2cae5bcc
但我想避免添加像 Babel 这样的东西，如果我可以避免的话.

ESLint 是否有阻止任何类型的相对路径的规则？只允许绝对路径？

我试图在我的 Angular 项目中制作一些自定义搜索过滤器，它工作正常，但在我的 vscode 中出现错误。在我之前的项目中，在我更新 cli 后它工作正常，但出现了这样的错误。我该如何解决这个错误？

提前致谢

类型“未知”不可分配给类型“any[] & Iterable”

我用的是角度11。

<section *ngIf="!spinner; else showspinner">
  <div class="w-100 px-5">
    <div class="p-3">
      <label>Email</label>
      <input
        type="text"
        name="email"
        placeholder="Search By Email"
        class="form-control"
        id=""
        [(ngModel)]="searchText"
      />
    </div>
  </div>

  <div class="table-responsive">
    <table class="table table-hover table-bordered table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Enrolment-Id</th>
          <th>Course</th>
          <th>Python/Sql</th>
          <th>Statistics</th>
          <th>ML</th>
          <th>Mid-Term Objective</th>
          <th>Mid-Term Subjective</th>
          <th>Final Assessment</th>
          <th>Project Ability</th>
          <th>Internship Ability</th>
          <th>Live Session Attendance</th>
          <th>Internship Attendance</th>
          <th><a> view </a></th>
          <th><a> Downlode </a></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of response …

我刚刚开始使用 Angular 动画。并且不想用它来动画 *ngIf 。遗憾的是它不起作用:(。我没有收到错误消息。我从这里尝试了几种解决方案，但没有任何效果。此外，删除其中一个动画不会改变任何内容，或者完全删除其中一个 *ngIf-blocks 也不会改变任何内容。没有改变任何东西。它只是不起作用，并且终端或开发工具中也没有可见的错误。

这是来自打字稿的动画定义。

animations: [
  trigger('inOutPaneAnimation', [
    state('true', style({ opacity: 1, transform: 'translateX(0)' })),
  state('void', style({ opacity: 0, transform: 'translateX(-100%)' })),
  transition(':enter', [animate('750ms ease-in-out')]),
  transition(':leave', [animate('600ms ease-in-out')]),
]),
trigger('inOutActiveItemAnimation', [
    state('true', style({ opacity: 1, transform: 'translateX(0)' })),
  state('void', style({ opacity: 0, transform: 'translateX(100%)' })),
  transition(':enter', [animate('600ms ease-in-out')]),
  transition(':leave', [animate('750ms ease-in-out')]),
]),

HTML 看起来像这样：

<div
  *ngIf="activeItem"
  [@inOutActiveItemAnimation]
  class="bt3-locations__active-item"
>
  <app-location-active-item
    [isSingleLocation]="isSingleLocation"
    [location]="activeItem"
    [showRouteLabel]="showRouteLabel"
  ></app-location-active-item>
</div>
<div *ngIf="!activeItem" [@inOutPaneAnimation] #paneContent>
  <div
    *ngTemplateOutlet="
      locations.data.length > 1 ? multipleGroups …

模板 TR 未显示，并生成错误：NG0303：无法绑定到“ngForOf”，因为它不是“tr”的已知属性。我不明白为什么。我在 Angular 11 和 navigator Chrone

控制台 html 中出现错误：

    <div>
    <h1 class="module-title">Job logs</h1>
    <span class="sp-notice">the time zone is set on GMT</span>
    <div class="container">
        <table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">#JobFirst</th>
                <th scope="col">Last start</th>
                <th scope="col">Last Finish</th>
                <th scope="col">Time</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let item of jobs">
                <th>{{ item.JobName }}</th>
                <td>{{ item.LastStartOperation }}</td>
                <td>{{ item.LastFinishOperation }}</td>
                <td>{{ item.Time }}</td>
              </tr>
            </tbody>
          </table>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

这是文件 component.ts 的内容：

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

@Component({
  selector: 'app-joblog',
  templateUrl: './joblog.component.html', …

我是角度新手。我面临重定向到外部路由的问题。我想从我的 Angular 应用程序重定向到其他 MVC 应用程序。喜欢：www.abc.com/angularapp到www.abc.com/mvcapp

请帮助如何重定向到此类路线