小编fro*_*.io的帖子

尝试运行我的Angular 2 RC6应用程序时,在浏览器控制台中出现以下错误:

> Error: Template parse errors: 'header-area' is not a known element:
> 1. If 'header-area' is an Angular component, then verify that it is part of this module.
> 2. If 'header-area' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component
> to suppress this message.("

    <div class="page-container">
        [ERROR->]<header-area></header-area>
        <div class="container-fluid">

> "): PlannerComponent@1:2

我不明白为什么找不到该组件.我的PlannerModule看起来像这样:

@NgModule({
  declarations: [
    PlannerComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    EreignisbarAreaComponent,
    GraphAreaComponent,
    nvD3
    ],
  imports: [
    RouterModule,
    CommonModule,
    ModalModule
    ],
  bootstrap: [PlannerComponent], …

在Java中,您可以使用类"Class"将类作为参数提供给方法.我没有在打字稿文档中找到任何类似的东西 - 是否可以将类交给方法？如果是这样,"any"类型是否包含此类类型？

背景:我遇到了Webstorm的问题,告诉我无法将一个类移交给@ViewChild(...)Angular 2.然而,Typescript编译器并没有抱怨.签名@ViewChild()似乎是"Type<any> | Function | string",所以我想知道是否有任何包括类.

我在我的web项目中使用Angular 5.2.0和Bootstrap 4.我安装了bootstrap 4 npm i bootstrap --save,它告诉我有关未满足的对等依赖项:

npm WARN bootstrap@4.0.0 requires a peer of jquery@>=3.0.0 but none was installed.
npm WARN bootstrap@4.0.0 requires a peer of popper.js@^1.11.0 but none was installed.

当然,Bootstrap的JS依赖于这些对等依赖.到目前为止,这么平常.

问题是:我不使用任何Bootstraps JS.我正在使用ng-bootstrap,这是为Angular重写的Bootstrap组件.

这个警告让我感到很恼火,因为它真的不是一件事,当我还没有使用它时(这个项目中没有其他人应该 - 在尝试使用Bootstrap的组件本身时会出错).清洁代码和依赖项不应输出任何警告.

为了摆脱这个警告,我尝试了不同的方法:

• 找一个只包含Bootstrap的SCSS的npm-package. 至少有一个,但它仍然使用Bootstrap的版本3.此外,没有办法告诉,当这些包更新时,所以我更喜欢使用原始bootstrap包.
• 只需安装依赖项而不使用它们.这导致了package.json未使用的依赖关系- 并且在清洁代码环境中也应避免(imho).
• 使纱线/ npm的警告静音(我最近切换到纱线,但错误类似).可能不是一个好主意,警告通常是有用的...似乎也有共识,一个人不应该关闭特定的警告.我有点同意.
  • 忽略他们.对我来说不是一个选择 - 如上所述,干净的构建过程不应该返回警告.

那么:有没有办法以干净的方式处理这些对等依赖警告？

我们在项目中使用ng-bootstrap Datepicker作为指令：

<input class="form-control"
         name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close()" [(ngModel)]="model"
         (ngModelChange)="onDateSelected()">

在目前的行为是onDateSelected()和每一个时间变化的输入领域取得了当选择在日期选择器的日期被称为。

的期望的行为是onDateSelected()被称为每当在在日期选择器或将光标移动出的日期用户点击<input>（即模糊）。

我的方法是更改(ngModelChange)为(blur)：

<input class="form-control"
         name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
         [(ngModel)]="model">

但是，当从日期选择器中选择一个日期时，这将导致onDateSelected() 无法调用-之所以有意义，是因为光标不在内<input>。但是，dateSelected在搜索我可以调用的ng-bootstrap文档时，找不到某种-Event onDateSelected()：

<input class="form-control"
         name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
/* missing -> */ (dateSelected)="onDateSelected()" /* <- */ [(ngModel)]="model">

我有什么想念的吗？或者也许是实现此行为的另一种方法？我想不出是唯一有此要求的人...

我有一个名为CalculationService的服务,它被声明@Injectable().此服务使用了许多其他注入类,每个类也被声明为@Injectable()并通过给予CalculationService的构造函数@Inject().

现在,当我想在我的应用程序中使用该服务时,AppComponent看起来像这样(为了方便起见,我省略了Typescript导入):

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routeConfig),
    PlannerModule
  ],
  providers: [
    InputService,
    Bausparen,
    BausparenInput,
    Girokonto,
    GirokontoInput,
    Immobilien,
    ImmobilienInput,
    Lebensversicherung,
    LebensversicherungInput,
    Rentenversicherung,
    RentenversicherungInput,
    Tagesgeld,
    TagesgeldInput,
    Termingeld,
    TermingeldInput,
    Wertpapiere,
    WertpapiereInput
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

我不需要直接访问app模块中声明的所有提供程序.唯一需要的类是CalculationService,但我不知道如何在服务中声明提供者.

有没有办法将服务重构为模块,即在CalculationService中声明提供程序？或者我是否必须摆脱所有@Injectable()s(Bausparen等)并在计算服务中创建对象,以便不需要提供者？

我们有一个应用程序，它使用带有ngrx的 Redux-Pattern以及针对 i18n 的ngx-translate。我已经从这个答案中学习了如何与 ngrx 一起处理 Angular i18n 方法，但我不知道 ngx-translate-approach 最适合 ngrx 应用程序的位置。

可以做翻译

• 按服务：this.translateService.get('SOME_KEY')
• 或通过管道：{{ 'SOME_KEY' | translate }}

它提供了四个可能的位置，可以在其中翻译密钥：

1. 在组件中，在调用操作之前
2. 在操作本身中，在将数据传递到存储之前
3. 在减速机中
4. 在视图中，当状态更改触发重新渲染时

您认为将翻译过程放在哪里是最简洁的方式？

我正在 Angular 15.2.9 中实现一个功能性路由器防护，它检查用户是否登录。如果不是这种情况，防护应该返回 或falsea UrlTree（即重定向到登录页面），具体取决于参数redirectToLogin: boolean。

我正在使用类似于本文中的功能路由防护的工厂函数：

export const isLoggedIn = (redirectToLogin: boolean): CanActivateFn => {\n  return (next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {\n    const isLoggedIn = !!inject(CookieService).check(\'some_cookie\');\n\n    if (isLoggedIn) return true;\n    if (!isLoggedIn && !redirectToLogin) return false;\n\n    const redirectUrl = inject(Router).createUrlTree([\'user\', \'sign_in\'], {\n      queryParams: { next: encodeURIComponent(`/${next.url.join(\'/\')}`) },\n      queryParamsHandling: \'merge\',\n    });\n    return redirectUrl;\n  };\n};\n

它的工作原理与预期一致，但我无法为其编写规范：

  let cookieServiceSpy;\n  let activatedRouteSnapshot;\n\n  beforeEach(() => {\n    cookieServiceSpy = jasmine.createSpyObj<CookieService>([\'check\']);\n …

我使用Angular 5.2.0和ngrx构建了一个工具提示.当状态更新时,工具提示(以及其他内容)获得ElementRef到它应该追加的元素(=目标).有了这个目标,我可以放置工具提示的绝对位置:

let rect = state.tooltip.target.nativeElement.getBoundingClientRect();
if (rect) {
  this.position.left = rect.left;
  this.position.top = rect.top;
}

state.tooltip.target是ElementRef类型,打开Tooltip的元素通过@ViewChild获取:

@ViewChild('linkWithTooltip') tooltipTarget: ElementRef;

openTooltip() {
    if (this.tooltipOpen) {
      this.tooltipAction.closeTooltip();
    } else {
      this.tooltipAction.openTooltip({
        text: 'foo',
        target: this.tooltipTarget
      });
    }
    this.tooltipOpen = !this.tooltipOpen;
}

使用模板中的引用:

<a #linkWithTooltip href="">Lorem</a>

描述在这里(和许多其他地方).

但是,为了能够正确定位工具提示,我必须在渲染后知道工具提示的大小(例如,使其居中).我需要的是Tooltip本身的ElementRef而不是ViewChild.

如何获取当前组件的尺寸？我可以通过Component的ElementRef检索它们吗？如果是,我如何获得ElementRef？

我有以下代码出于演示目的，显示了一个简单的带有错误消息和提交按钮的表格行：

<form [ngFormOptions]="{updateOn: 'submit'}">
   <tid-form-row>
      <label tid-ui-label for="temperatureInput">Temperature:</label>
      <input [tid-ui-input]="{required: true}" id="temperatureInput" name="temperatureName" placeholder="20,4"
             [(ngModel)]="temperatureModel" #temperature="ngModel" [tidDigits]="{integer: 2, fraction: 1}" required>
      <ng-template #hint>
         <small tid-ui-hint>The yellow color indicates that this field is required.</small>
      </ng-template>
      <div tid-ui-error *ngIf="temperature.invalid && (temperature.dirty || temperature.touched); else hint">
         <span *ngIf="temperature?.errors.required">Field is required.</span>
         <span *ngIf="temperature?.errors.tidDigits">Must be max 2 integer digits and max 1 fraction digit.</span>
      </div>
   </tid-form-row>
   <tid-button type="submit">Check validation</tid-button>
</form>

这里tidDigits是一个自定义的ValidatorDirective与此ValidatorFactory：

export function digitsValidator(config: any): ValidatorFn {
  return (control: …

我有两个搜索框出现在(移动)页面的顶部:

焦点上所需的行为(即在其中一个框内单击)是:

• 选中的框展开
• 另一个盒子水平折叠
• 一个关闭图标在右侧展开.

这是过渡后的样子:

这是代码:

<div class="navigation--mobile__search">
    <div class="header-searchfield" id="kurssuche">
        <input type="text" class="header-searchfield__input" placeholder="Search1">
            <a href="">
                <span class="icon icon--lupe">
                    <svg class="icon__svg">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/svg-symbol.svg#lupe"></use>
                    </svg>
                </span>
            </a>
    </div>
    <div class="header-searchfield" id="volltextsuche">
        <input type="text" class="header-searchfield__input" placeholder="Search2">
            <a href="">
                <span class="icon icon--lupe">
                    <svg class="icon__svg">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/svg-symbol.svg#lupe"></use>
                    </svg>
                </span>
            </a>
    </div>                      
    <span class="icon icon--close-x header-searchfield__close-button" style="display: none;">
        <svg class="icon__svg">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/svg-symbol.svg#close-x"></use>
        </svg>
    </span>
</div>

相应的LESS-Classes:

.navigation--mobile__search {
        background: @common-quarks-color--cd-anthracite;
        display: flex;
        padding: .625rem .75rem;
        position: relative;
        .header-searchfield {
            display: …