标签: angular7

我已经使用 CLI 安装了最新版本的 Angular。根目录中有package.json。我运行命令：npm install。它安装了依赖项。

当我尝试在应用程序中使用包时，pipe或者component类似：

import * as _ from 'lodash';

它找不到这个依赖项。如何在新的 Angular 中使用和安装 npm 包？

我使用一些 REST 服务来收集数据，然后更改组件代码中 Observable 的值。我正在尝试使用 *ngIf 根据结果显示/隐藏 div 标签。但是，它不起作用， *ngIf 没有根据 Observable 的更改进行更新。

我必须触发变更检测吗？在 Angular 7 中实现这一目标的最佳方法是什么？这是我尝试过的一个例子：

HTML：

<div *ngIf="isAnimal$">
     <p>animal</p>
</div>

成分：

public isAnimal$: Observable<boolean> = of(false);
...
ngOnInit() {
  checkAnimal();
}

private checkAnimal() {
  this._dataService.getData()
      .subscribe((result) => {
         if (result === 'animal') {
           this.isAnimal$ = of(true);
         }
      });
}

我还尝试创建一个简单的服务，但这也不起作用。像这样：Angular *ngIf 绑定到函数

所以我读了这个： https: //angular.io/guide/dynamic-component-loader

我正在尝试从 i18n 数据库加载产品描述页面。让我们定义 REST 服务器，例如请求：

{ product: "stick", lang: "en" }

将返回：

{ content:
   "<div class="wrap">
        <h1>English translation title</h1>
        <span>Some text</span>
        <app-image-component some-component-bindings="..."></app-image-component>
    </div>"
  css:
   ".wrap { rules }"
}

我的问题：

• （基于教程链接）我知道 Angular 允许提取数据对象并将它们插入到预定义的 html 模板中。是否允许插入整个模板（整个 HTML，而不仅仅是数据值）？
• 也允许自定义CSS吗？我知道 css （或 sass）被编译成 Angular 特定的“thingy” - 这可以在加载时完成吗？内联CSS怎么样？
• 如果第一个是可能的 - 它也会编译角度事物（应用程序定义的组件，例如app-image-component示例中的组件）？

目标是赋予（应用程序）管理员将产品内容页面组合在一起的权力，这些页面可以使用填充数据的预定义组件。

我想做的事情是否得到了良好的支持，还是会非常复杂（有一些奇怪的技巧）？

我想要的结果是在将音频文件上传到服务器之前创建音频文件的预览。但是输入文件后，什么也没有发生。文件不会动态添加到 aduio 标记中，我也不会收到任何错误。控制台显示文件已加载。任何帮助将不胜感激！

我的组件html有~

<audio controls #figAudio>
  <source [src]="audSrc" type="audio/ogg">
  <source [src]="audSrc" type="audio/mpeg">
  <source [src]="audSrc" type="audio/wav">
</audio>
<input type="file" (change)="audFileSelected($event)">

我的组件 ts 文件有 ~

audSrc: SafeUrl;

constructor (
  private sanitize: DomSanitizer
) {}

sanitizeUrl(url: string) {
  return this.sanitize.bypassSecurityTrustUrl(url);
}

audFileSelected(event: any) {
  console.log(event.target.files[0]);
  if (event.target.files && event.target.files[0]) {
    const reader = new FileReader();
    reader.readAsDataURL(event.target.files[0]);
    reader.onload = (evt: any) => {
      this.audSrc = evt.target.result;
        };
    }
}

我在 Angular 7 中设置了更改路线时的幻灯片动画。我现在遇到的问题是动画卡顿，因为我导航到的组件正在生命周期的动画期间执行代码OnInit。

动画完成后如何初始化组件的代码以防止丢帧？

编辑：

我正在使用路由器动画，这是我的设置：

app.component.html:

<div [@routeAnimations]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  animations: [routeAnimations]
})
export class AppComponent {
  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
  }
}

app-routing.module.ts:

const routes: Routes = [
  {
    path: 'sign-in',
    loadChildren: './modules/sign-in/sign-in.module#SignInModule',
    data: {animation: 'slideLeft'}
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    data: {animation: 'slideRight'}
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

animations.ts: …

我有两个共享组件，我希望父组件调用其子组件中的方法

共享组件 1（父组件）

@Component({
selector: 'parent',
template: `<div>
                <div #parentBody>
                   <ng-content select="[parentBody]"></ng-content>
                </div>
                <button (click)=" " >tell child to dance</button>
            </div>
        `,
})
export class ParentComponent {
  constructor() { }

}

共享组件 2（子组件）

@Component({
selector: 'child',
template: `<div>
                <p>I'm a child component</p>
           </div>
          `,
})
export class ChildComponent {
  dance() {
     alert('dancing');
  }
}

并在应用程序组件中

<parent>
    <div parentBody>
       <child></child>
    </div>
<parent>

在这种情况下，我们如何在父组件和子组件之间进行通信

我正在 Angular 7 中启动一个新项目，并有一个基础组件来集中我的一些全局变量和服务。由于项目可能变得相当大，我选择这种方法是为了避免在每个组件的开头以及 super() 调用时进行大量导入。

为此，我实现了此处描述的方法，其中外部类存储要在基本组件中使用的依赖项注入器。正如此处所讨论的，必须进行修改以符合 Angular 7（注入器必须在 AppModule 处初始化）。（见下面的笨蛋）

这对于运行项目来说效果很好，当我尝试运行单元测试（使用 karma-jasmine）时，问题就出现了。由于 AppInjector 是在模块中初始化的，因此测试运行不会对其进行初始化。然后，由于我的基本组件尝试调用注入器的函数，因此它崩溃了。

如果有人对此有任何解决方案，无论是通过修改测试结构还是 AppInjector 本身，我们将不胜感激。

这是一个包含所有涉及代码的插件。该示例是使用 primeng toast 模块的全局通知组件和基础组件中的全局通知服务。（我无法让 plunker 正常工作，某种 MIME 类型错误，但代码都在那里）

https://next.plnkr.co/edit/7v5nB8cORWsnpPAL?preview

当我运行 ng test 时，这是我得到的错误：

Chrome 71.0.3578 (Windows 10.0.0) AppComponent should create the app FAILED
        TypeError: Cannot read property 'get' of undefined
            at NotificationsComponent.BaseComponent (http://localhost:9876/src/app/components/base.component.ts?:22:50)
            at new NotificationsComponent (http://localhost:9876/src/app/components/utils/notifications/notifications.component.ts?:17:13)
            at createClass (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:20716:1)
            at createDirectiveInstance (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:20595:1)
            at createViewNodes (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:21821:1)
            at callViewAction (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:22137:1)
            at execComponentViewsAction (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:22056:1)
            at createViewNodes (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:21849:1)
            at createRootView (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:21735:1) …

在 Angular 7 项目中，我有以下 Typescript 界面：

export interface Request {
  expand: string;
  limit: number;
} 

然后我按如下方式使用它：

let request: Request = { expand: 'address' };

我收到错误，因为我没有设置limit...

如何limit在界面中设置可选？

我在角度材料选项卡内有一个输入字段 -

<mat-tab-group     headerPosition="below">
    <mat-tab *ngFor="let sheet of sheets; let index = index">
        <ng-template mat-tab-label>            
            <input type="text" (keydown)="onkeypress($event)">
        </ng-template>
    </mat-tab>
</mat-tab-group>

除空格键外，所有按键事件均工作正常。当我尝试按空格键时。

注意：如果我按 Ctrl+空格键，则空格键起作用。

我正在使用 Angular 7。

<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <Employees>
    <Employee>
    <Name>nameOne</Name>
    <Id>IdOne</Id>
    </Employee>
    <Employee>
    <Employee-Name>empName</Employee-Name>
    </Employee>
    <Employee>
    <Employee-Id>IdEmp</Employee-Id>
    </Employee>
    </Employees>
</note>

• 客户端上传不同的 .XML 文件，每个文件必须有 但父节​​点在上传的文件中可能不同..

• 需要读取每个节点并进行比较 有或没有，如果是，那么我们将使用该 ID

• 我的代码

const parser = new xml2js.Parser({ strict: false, trim: true });
parser.parseString(uploadedXMLData, (err, result) => {
    const obj: any[] = result;
    console.log(result);
    Object.entries(obj).forEach((data, index) => {
        console.log('Data::: ', data, index);
        data[0]['NOTE'].forEach((empData, indexNumber) => {
            console.log('Emp Data::: ', empData, indexNumber);
        });
    });
});