标签: angular9

我正在创建一个 Angular 9 应用程序，我的文件夹结构如下所示：

| app
  | app.component.ts
  | app.component.html
  | app.component.scss
| assets
  | _colors.scss

在_colors.scss文件中我定义了两种颜色：

$red: #DA0000;
$blue: #1080E1;

在app.component.scss我导入并使用这样的颜色：

@import '../assets/colors';

.some-class {
  background-color: $blue;
}

但这不起作用，颜色没有应用。并且没有错误。VSCode intellisense 帮助我设置导入路径，因此路径没问题。如果我尝试使用未定义的颜色（就像$black我收到错误一样），那么导入似乎正在工作，但颜色未应用。我在这里缺少什么？有任何想法吗？提前致谢。

在工作中，我们在一个 Azure Blob 存储上托管多个 Angular JS 应用程序。有一个 Azure 函数充当代理并导航到合适的应用程序文件夹和 html 文件。

现在我想用 Angular 9 应用程序替换一些 Angular JS 应用程序。

但上述方法适用于 Angular JS 应用程序，但不适用于 Angular 9 应用程序。

如果我将 Angular 9 应用程序作为静态网站托管在不同的存储上，它就可以正常工作。但由于无法在 Azure 存储帐户上托管多个应用程序作为静态网站，因此我正在寻找解决此问题的方法。

是否可以在一个 Azure Blob 存储上托管多个 Angular 9 应用程序？如果是：我应该做什么才能使这项工作成功？

先感谢您！

我正在使用 ng2-dragula 进行拖放功能。当我在末尾拖放第一个元素（或任何元素），然后尝试使用 addNewItem 按钮将新项目添加到数组时，我看到问题，新项目没有添加到末尾。如果我不将元素拖到最后，新项目将添加到 UI 的末尾。我希望在任何情况下新项目都显示在底部。任何帮助表示赞赏。这个问题在 Angular 7 中无法重现。我发现 Angular 9 中也出现了这种情况

JS

export class SampleComponent {

  items = ['Candlestick','Dagger','Revolver','Rope','Pipe','Wrench'];
  constructor(private dragulaService: DragulaService) { 
    dragulaService.createGroup("bag-items", {
      removeOnSpill: false
    });
  }

  public addNewItem() {
    this.items.push('New Item');
  }
}

超文本标记语言

<div class="container" [dragula]='"bag-items"' [(dragulaModel)]='items'>
    <div *ngFor="let item of items">{{ item }}</div> 
</div>

<button id="addNewItem" (click)="addNewItem()">添加新项目

我从评论中编辑了 stackblitz，以帮助可视化问题。当一个单位被拖到列表底部时，这似乎会被触发。更新了 stackblitz ：https://stackblitz.com/edit/ng2-dragula-base-ykm8fz ?file=src/app/app.component.html ItemsAddedOutOfOrder

我是 Angular 的新手，现在我只想创建一个.ts文件而不是整个组件，你能告诉我如何使用 来做到这一点吗ng generate？

用例：在构建应用程序时，我想将构建版本写入.ts.我想在部署此构建时加载此文件并向用户显示构建版本。

我正在使用Angular 9。我需要在导航开始后立即知道哪个将是目标网址。我想做这样的事情：

constructor(router: Router) {
    this.router = router;
}

this.router.events.pipe(
    filter(event => event instanceOf NavigationStart),
    map(event => {
        //get somehow the destination url of this navigation just started
    })
).subscribe()

有没有办法只使用 Angular Router来实现这一点？

我在将 ace 编辑器设置为只读模式时遇到问题。我正在使用 Angular 9 并尝试了以下方法：

在 HTML 文件中我有：

 <ace-editor mode="java" theme="monokai" id="codeEditor"></ace-editor>

在我的打字稿文件中，我有：

import * as ace from 'ace-builds/src-noconflict/ace';

... 

ngOnInit() {
    var editor = ace.edit('codeEditor');
    editor.getSession().setUseWorker(false);
    editor.setShowPrintMargin(false);
    editor.setReadOnly(true);
}

但是，当模板加载时，我仍然可以在我的 ace 编辑器中编写代码。

两个不同 API 的数据就像 Array1 & Array2

数组1=

[{"ID" : 1  ,"Name": "abc" , "FamilyName" , "Grimes" },{"ID" : 2 ,"Name": "bcd" , "FamilyName" , "Grimes" }]

数组2=

[{"ID" : 3  ,"Name": "efc" , "FamilyName" , "Grimes" },{"ID" : 4 ,"Name": "hij" , "FamilyName" , "Grimes" }]

预期输出：

 [{"ID" : 1  ,"Name": "abc" , "FamilyName" , "Grimes" },
  {"ID" : 2 ,"Name": "bcd" , "FamilyName" , "Grimes" },
  {"ID" : 3  ,"Name": "efc" , "FamilyName" , "Grimes" },
  {"ID" : 4 …

我正在开发 Angular 9 项目。随着项目不断增长，我决定将代码拆分为功能模块。我创建了一个单独的功能模块，声明并导出了每个子组件。我还在 AppModule 中导入了功能模块。

运行后ng serve，我仍然遇到此错误：（If 'app-component-name' is an Angular component, then verify that it is part of this module.该错误发生在我的功能模块中使用的每个组件上，导致数十个错误行具有相同的消息。）

这是一个片段

登陆页面.module.ts

//Core imports
...

//Lib imports
...

//Routing
import { LandingPageRoutingModule } from './landing-page-routing.module';

//Shared components
...

//Components
import { LandingPageComponent } from './landing-page.component';
import { SectionCompositionLayoutComponent } from './section-composition/section-composition-layout/section-composition-layout.component';
import { SectionPresentationLayoutComponent } from './section-presentation/section-presentation-layout/section-presentation-layout.component';
import { SectionContactLayoutComponent } from './section-contact/section-contact-layout/section-contact-layout.component';
import { SectionDescriptionLayoutComponent } from './section-description/section-description-layout/section-description-layout.component';
import { SectionHeaderLayoutComponent } from …

如何在接受数字的输入文本框中将第一个数字限制为 0。

例如：数字不能是这样的 012345 数字可以是这样的 123000

我使用了模式 /^0|[^0-9.]/ 但它不适用于角度反应形式。我的输入文本框控件如下所示：

<input type="text" class="form-control" id="inputNumber" formControlName="inputNumber" maxlength="5" minlength ="1" pattern="/^0|[^0-9.]/"   [(ngModel)]="inputNumber"  required>

任何想法都受到高度赞赏。

感谢帮助。

我需要在每个函数调用中从数组的数组中迭代下一个值。

forex：如果我有一个数组的数组

const Arr = [ ['1','2', '3'], ['11','12', '13'], ['11','22', '33'],]

我有一个函数

getNumber(id: number): string {
 let n;
 for(const i in Arr) {
    for(const j in Arr[i]{
       n = j;
    }
 }
 return n;
}
             

我在这里需要多次调用该函数，但每次它都应该返回下一个数字

let i = 4;
for(let j=0; j<=i; j++) {
  const g = { 
   number: this.getNumber(i); //this i means id
  }
}

调用函数后，它会像这样返回

'1'
'2'
'3'
'11'
'12'

请帮我解决这个问题

我有一个如下所示的数组对象

allRoles = 
[
    { id: "0", name: "Tester", description: "Role is testing" },
    { id: "1", name: "Developer", description: "Role is Developer" },
    { id: "2", name: "Admin", description: "Role is Admin" },
    { id: "3", name: "Manager", description: "Role is Manager" },
    { id: "4", name: "Reviewer", description: "Role is Reviewer" }
]

assignedRoles = 
[
    { id: "0", name: "Tester", description: "Role is testing" },
    { id: "4", name: "Reviewer", description: "Role is Reviewer" }
]

考虑到 …

想象一下，您有一个大型企业应用程序，并且希望在单击具有 css 类的元素时有一个钩子，您不想编辑 css 类的每个用法并添加 Angular 指令，因为这是一项耗时的任务，并且错误是有保证的.

使用 jQuery，它看起来像这样： $('.btn').on('click', ...);

但是，如何使用 Angular 9 来实现这一点？