标签: angular4

运用

"@angular/cli": "^1.0.0"

@angular/cli 忽略 tsconfig.json

该项目编译很好的编辑/删除 tsconfig.json

这是为什么？

我看到很多关于如何通过创建指令或HTML自动对焦在angularjs中设置自动对焦的帖子,是否有一种快速简便的方法来设置焦点角度(角度2,角度4等)

在 vanilla JS 中，您可以通过执行以下操作来模拟输入的键：

testComponent.dispatchEvent(new Event("keyup"))

但是，在 angular-cli 单元测试或控制台中执行此操作不会在我的组件中触发此功能，该功能通过以下方式响应关键事件：

  @HostListener('keyup', ['$event'])
  onKeyUp(event: KeyboardEvent) {

有任何想法吗？

AOT编译是否为angular@4.0.0和angular/cli@1.0.0的默认值？ 我们今天正在迁移我们的应用程序,我不知道它的文档仍然有效:https: //angular.io/docs/ts/latest/cookbook/aot-compiler.html

我遇到了一些与AoT Compilations错误相关的问题:属性'myModel'是私有的,只能在类'MyComponent'中访问.

ps.:仅在ng build -target = production时出现错误

我认为这种错误不应该发生在JIT编译中......

从Angular2升级到Angular4后,我在CLI中遇到这些错误.虽然升级后我的应用程序仍在运行,但我只是想知道如何解决这些错误.有任何想法吗？

升级前的Package.json:

{
  "name": "myapp",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "core-js": "^2.4.1",
    "foundation-sites": "^6.3.1",
    "ng2-translate": "^5.0.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.1",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0", …

我一直在尝试使用主模块和3个产品模块创建一个基于cli的示例angular4应用程序(产品本身是一个路径参数,可以懒洋洋地加载每个产品屏幕).

这是我的样本 - https://github.com/shankarvn/angular4lazyloading

重现步骤

• git clone https://github.com/shankarvn/angular4lazyloading.git

• cd应用程序

• npm安装

• ng serve -p 4003

在浏览器localhost:4003 =>应该加载3张显示product1,product2和product3的卡片.此时,单击product1,您将看到路径更改和product1加载的ui.现在单击Dashboard,您将在控制台中看到错误

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'product1/dashboard'
Error: Cannot match any routes. URL Segment: 'product1/dashboard'
    at ApplyRedirects.noMatchError (router.es5.js:1404) [angular]
    at CatchSubscriber.selector (router.es5.js:1379) [angular]
    at CatchSubscriber.error (catch.js:104) [angular]

不确定我做错了什么 - 只是在延迟加载product1模块时加载仪表板路径.加载product1模块时,不应该注册路由.任何帮助表示赞赏.

谢谢.

我最近安装了Angular 4(RC2)并从简单的Quickstart示例中复制了文件.但是当我尝试使用Webpack构建项目时,我收到错误,指出Rxjs无法解析:

WARNING in ~/@angular/core/@angular/core.es5.js
6857:19-40 Critical dependency: the request of a dependency is an expression

WARNING in ~/@angular/core/@angular/core.es5.js
6883:19-106 Critical dependency: the request of a dependency is an expression

ERROR in ~/@angular/core/@angular/core.es5.js
Module not found: Error: Can't resolve 'rxjs/Subject' in 'node_modules/@angular/core/@angular'
 @ ~/@angular/core/@angular/core.es5.js 26:0-39
 @ ./app/app.module.ts
 @ ./main.ts

ERROR in ~/@angular/core/@angular/core.es5.js
Module not found: Error: Can't resolve 'rxjs/observable/merge' in 'node_modules/@angular/core/@angular'
 @ ~/@angular/core/@angular/core.es5.js 23:0-46
 @ ./app/app.module.ts
 @ ./main.ts

ERROR in ~/@angular/core/@angular/core.es5.js
Module not found: Error: Can't resolve 'rxjs/operator/share' …

我试图在角度4中切换菜单.我有2个独立的组件.一个用于标题布局,第二个用于菜单列表.我在标题布局中单击图标时写了切换功能,我试图隐藏并显示菜单列表.但这不适合我.

以下是我的代码:

app.navbarComponent.html文件:

<header id='sv_header'>
  <div class='row'>
    <div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 col'>
      <a href='' class='logo'>
        <img src='{{ logo }}' alt='Savaari' />
      </a>
    </div>
    <div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 col supportHolder'>
        <img src='{{ customercare }}' alt='24X7 Customer Care Support' />
    </div>
    <div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right col loginHolder'>
      <a class='user_login' (click)='toggleMenu()'>
        <img src='{{ signin }} ' alt='signin' />
        <span>Sign In</span>
      </a>
    </div>
  </div>
</header>

app.navbarComponent.ts文件:

import { Component } from '@angular/core';
@Component({
    selector: 'navbar',
    templateUrl: './app.navbarComponent.html'
}) …

在我的 angular 4 应用程序中，来自 ng-bootstrap 的 ngbDropdown-Element 不起作用。

我已经为这种情况安装了以下 npm 模块：

"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22", "bootstrap": "4.0.0-alpha.6", "bootstrap-sass": "^3.3.7",

我的 app.module.ts 看起来像这样：

import { BrowserModule } from "@angular/platform-browser"
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";

import { AppComponent } from "./app.component";
import { FileitHeaderComponent } from "./fileit-header/fileit-header.component";
import {TranslateModule} from "ng2-translate";
import { CCACampaignComponent } from "./cca-campaign/cca-campaign.component";
import {NgbModule} from "@ng-bootstrap/ng-bootstrap";


@NgModule({
  declarations: [
    AppComponent,
    FileitHeaderComponent,
    CCACampaignComponent
  ],
  imports: [
    BrowserModule, …

在我的Angular2/4 应用程序中，我使用ng-bootstrap及其组件NgbTooltip。

假设以下HTML代码片段

<div class="col-sm-8 text-ellipsis" 
     ngbTooltip="'A very long text that does not fit'" 
     placement="top" 
     container="body">
    A very long text that does not fit
</div>

与给定的习惯CSS

.text-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

我对我的实现还不满意，也许有人可以帮助我找到一个优雅的解决方案来解决我的问题：

假设文本不适合div，那么它将被截断并按预期附加“...”，并且工具提示显示在 的中心顶部div。这对于这种情况很好，但是当内容很短时，它看起来很难看：

<div class="col-sm-8 text-ellipsis" 
     ngbTooltip="'1.jpg'" 
     placement="top" 
     container="body">
    1.jpg
</div>

现在工具提示仍然显示在 div 的顶部中心，但位于文本的右侧（因为它很短但div仍然是全宽）。

我认为我可以通过使用一个span元素轻松解决这个问题，并在其上设置工具提示而不是div：

<div class="col-sm-8 text-ellipsis">
    <span  
     ngbTooltip="'A very long text that does not …