小编Tan*_*eel的帖子

我正在学习如何创建博客网站。我首先尝试了一个简单的例子。但是文本编辑器没有显示在我的屏幕上。我用npm install --save quill@1.3.6 ngx-quill命令安装了 Quill 。我app.component.html的很简单。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand ml-auto mr-auto" href="#">Quill JS Editor with Angular</a>
</nav>

<div class="container">
  <div class="row pt-5">
    <div class="col-md-8">
      <form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="editor">
            <h3>Editor</h3>
          </label>
          <quill-editor></quill-editor>
        </div>
      </form>
    </div>
    <div class="col-md-4 bg-light p-4">
      <h3>Output</h3>
      <p class="my-5"></p>
    </div>
  </div>
</div>

其实应该是这样的。

我还引进FormGroup并FormControl从@angular/forms我的app.component.ts包含以下代码。

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms'; …

采访中有人问我。我无法回答。

"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]

我可以看到它是一个数组。“ not ie <= 11”表示将无法在低于Internet Explorer v11的操作系统上运行。“ op_mini”必须与Opera mini相关。

但我想知道为什么要这样做。

我一生都在使用 Ubuntu，但今天我得到了另一台安装了Windows 10. 我有一个Angular项目，我想做以下事情。所有这些都在一个单独的终端中：

1. 导航到项目文件夹并运行，code .以便我可以在 Visual Studio 上看到代码。

2. 导航到项目文件夹并运行ng serve以启动我的应用程序并保持其运行。

3. 导航到项目文件夹并运行node server.js以启动后端服务器并保持其运行。

   这是非常痛苦的，因为项目位置是-

C:\Users\tanzeel\Downloads\social-coder

一次又一次地使用新终端导航是浪费我的时间。我决定编写一个batch文件，这样我只需单击一下即可一次性完成所有操作。这是我的starter.bat文件包含的内容：

cd C:\Users\tanzeel\Downloads\social-coder\application 2>nul && call npm.cmd start
node C:\Users\tanzeel\Downloads\social-coder\server\server.js
code C:\Users\tanzeel\Downloads\social-coder

如果我手动将上述 3 个命令复制粘贴到单独的终端中，则上述所有命令都可以完美运行。但是当我尝试从批处理文件运行它们时，问题只是执行了第一个命令。我不知道其他两个命令被简单地忽略了还是什么。我来自：

1. 如何在批处理文件中运行多个命令？
2. 如何在一个批处理文件中运行多个命令？

我承认我是个新手，知识上还有差距。请纠正我。

我在 stackoverflow 上其他人的答案的帮助下创建了一个自定义管道。如果article.title大于 55 个字符，则应在 55 个字符后进行修剪，并应有三个点（如尾巴）。例如：

1. 如何制作蛋糕
2. 如何制作冷饮...
3. 在家做咖喱...
4. 美味的西班牙鸡蛋

请注意第 2 点和第 3 点，多余的字符如何被修剪并替换为 3 个点。

这是代码：

省略号.pipe.ts

import { Pipe } from '@angular/core';
import { SlicePipe } from '@angular/common';

@Pipe({
  name: 'ellipsis'
})
export class EllipsisPipe extends SlicePipe {
  constructor () {
    super();
  }
  transform(value: string, maxLength: number): any {
    const suffix = value && value.length > maxLength ? "..." : "";
    return super.transform(value, 0, maxLength) + suffix;
  }
}

注：我...implements PipeTransform也尝试过。 …

stackoverflow 上也有同样的问题，但他们接受的答案对我不起作用，因为他们都没有使用对象文字。无需浪费您的时间。这是我的代码。

tribute.component.ts （contribute只是我用它创建的组件的名称ng generate component contribute）。

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-contribute',
  templateUrl: './contribute.component.html',
  styleUrls: ['./contribute.component.css']
})
export class ContributeComponent implements OnInit {
  makeNewPost={}; //THI IS MY EMPTY OBJECT TO WHICH I WANT TO ADD PROPERTIES LATER IN THIS CODE

  constructor(private _auth: AuthService) { }

  ngOnInit() {
      //SOME CODE
  }

  //THIS …

它正在工作，但不是它应该的。toast在我按下提交按钮后，消息不是一个适当的组件，而是简单地显示为普通文本。

我遵循了文档中写的所有内容。这是我的文件。

包.json

"dependencies": {
    ...
    "primeicons": "^2.0.0",
    "primeng": "^8.0.3",
    ...
  },

angular.json

"styles": [
   "src/styles.css",
   "node_modules/primeicons/primeicons.css",
   "node_modules/primeng/resources/themes/nova-light/theme.css",
   "node_modules/primeng/resources/primeng.min.css"
],

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
import { ToastModule } from 'primeng/toast';
import { MessageService } from 'primeng/api';



@NgModule({
  declarations: [
    ...        
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ...
    ToastModule
  ],
  providers: [MessageService],
  bootstrap: [AppComponent]
})
export class AppModule { }

贡献.component.ts

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

我很惊讶关于同一个问题有这么多问题，但在任何地方都没有好的答案。事实上，这个问题甚至没有一个单一的答案。无论如何，我的问题非常相似。在我决定在同一个端口（在我的情况下为 PORT 3000）上运行我的前端和后端之前，一切正常。我按照以下步骤操作：

1. 用于ng build --prod编译开发文件。一个dist文件夹的创建。
2. 然后将所有服务器文件和dist文件夹上传到服务器。
3. 并使用 pm2 运行服务器。命令是pm2 start server.js.

好吧，我知道这些行是从哪里进来的index.html：

脚本 src="runtime-es2015.858f8dd898b75fe86926.js" type="module"

脚本 src="polyfills-es2015.5728f680576ca47e99fe.js" type="module"

脚本 src="runtime-es5.741402d1d47331ce975c.js" nomodule>

脚本 src="polyfills-es5.7f43b971448d2fb49202.js" nomodule>

脚本 src="main-es2015.ec7a803b995f0d691eeb.js" type="module">

脚本 src="main-es5.1cd51b4ce24f28c1391b.js" nomodule>

但现在他们正在制造这些错误：

由于不允许的 MIME 类型（“text/html”），从“ http://localhost:3000/runtime-es2015.858f8dd898b75fe86926.js ”加载模块被阻止。

由于不允许的 MIME 类型（“text/html”），从“ http://localhost:3000/polyfills-es2015.5728f680576ca47e99fe.js ”加载模块被阻止。

由于不允许的 MIME 类型（“text/html”），从“ http://localhost:3000/main-es2015.ec7a803b995f0d691eeb.js ”加载模块被阻止。

我尝试了设置type=text/javascript以及更多的解决方案和技巧。但没有任何效果。

PS：这是构建前的整个项目。也可以查看它的 README。

恐怕我的问题会被否决或标记为重复。但我仍然想清除我的 git 基础知识。互联网上有文章，但由于我在 git 中只有几天大，我在这里很困惑：

显然，Repository和Workspace是两个不同的东西。所以我用谷歌搜索了两者之间的区别。答案如下： 本地存储库是工作区中的一个目录。 根据 git，我不明白这一点。 这是关于 StackOverflow 的类似问题。但我没有很好地理解答案。然后我试着研究这个： .

请尽可能简单地向我解释这一点（*假设您正在向一个 10 岁的孩子解释这一点）。我可能不明白沉重的 git 行话。

我正在学习 Angular。我创建了一个小部件。我正在使用primeng组件即p-overlaypanel. 当我单击输入字段时，面板会打开。我有两个按钮Apply和Cancel覆盖面板本身。当我单击取消按钮时，我希望此叠加层关闭。这是堆栈闪电战。这是我的代码。

时间选择器.component.html

<div class="timeselector">
    <p-overlayPanel class="timeselector-overlay" #op>
        <div class="timeselector-panel">
            <p>Time selector</p>
            <br />
            <div>
                <button (click)="closeTimeselector($event, op)">
                  Cancel
                </button>
                <button>
                  Apply
                </button>
            </div>
        </div>
    </p-overlayPanel>
</div>

<div (click)="op.toggle($event)">
    <input type="text">
</div>

和timeselector.component.ts

import { ... } from '@angular/core';

@Component({
    ...
})
export class TimeselectorComponent implements OnInit {

    timeselectorOpen = false;

    constructor() {}

    ngOnInit(): void {}

    closeTimeselector(event, element) {
        if (this.timeselectorOpen) {
            element.hide(event);
            this.timeselectorOpen = false;
        }
        console.log("closer …

我是角度新手。我想剪切长度超过 15 个字符的短字符串（例如），然后...在末尾添加。

例如：

姓名：坦泽尔,

角色：实习生

地址: 孟加拉...,

喜欢：C、CPP、...、

我正在使用p-chipsPrimeNg 来显示一些标签。我没有收到任何错误。实际上我什么也没得到，我的网页只是空白。甚至控制台日志也很干净。这是我的代码：

<p-chips [(ngModel)]="tokens">
  <ng-template let-item pTemplate="item">
    {{item | slice:0:15+'...'}}
  </ng-template>
</p-chips>

这是同样的stackblitz 。当我删除时，代码有效+...，但随后没有...看到连接（显然）。请指出我的错误。但是，在一个单独的分支中，我根据这个问题创建了自己的自定义管道：

如何在使用 Typescript 渲染时剪短长字符串

这是代码。

EllipsisPipe.component.ts

import { Pipe } from '@angular/core';
import { SlicePipe } from '@angular/common';

@Pipe({
  name: 'ellipsis'
})
export class EllipsisPipe extends SlicePipe {
  constructor () {
    super();
  }
  transform(value: string, maxLength: number): any {
    const suffix = value && value.length > maxLength ? …