小编Cod*_*n25的帖子

我正在尝试make一个水平可滚动的bootstrap行.该行包含div包含的客户评论.每个见证div的宽度是33.333%.

white-space: nowrap并且display: inline-block不起作用.

我究竟做错了什么？

<div class="row">
    <div class="col-lg-12 text-center">
        <div class="section-title">
           <div class="testimonial_group">
               <div class="testimonial">...</div>
               <div class="testimonial">...</div>
               <div class="testimonial">...</div>
               <div class="testimonial">...</div>
               ...
           </div>
        </div>
    </div>
</div>

我们目前正在尝试优化复杂的 Angular 应用程序（性能和包大小）。

我们发现我们有部分未使用的组件，但我们不能 100% 确定它们。无论如何......我们目前要问的问题是在 Angular 中摇树究竟是如何工作的。

问题 1)如果在模块的声明、导入或提供者数组中有条目，但该模块没有在任何地方使用，它们是否也通过摇树移除或包含在最终包中？

例子：

@NgModule({
  imports: [
    FirstModule,
    SecondModule  // Is not used anymore (probably) but imported here
  ],
  declarations: [SampleComponent] // Is not used anymore (probably) but imported here
})
export class SampleModule {
}

信息：该模块/组件的路由已被删除。

问题 2)仅从路由模块中移除这些组件是否足以使摇树过程成功？

问题 3)要使摇树过程达到最佳状态，应该具备哪些条件？

使用 Angular 8.2 版

我有两个输入字段和一个提交按钮(显示为内联).在填写输入字段后,我正在尝试向下一个兄弟添加一个类.因此,如果填写了第一个名称输入字段,则在电子邮件输入字段中添加一个类,如果填写了电子邮件输入字段,则将类添加到下一个输入字段,依此类推......

到目前为止这是我的代码:

$('.form-display #mce-FNAME').blur(function() {
     if($.trim(this.value).length) {
        $('#mce-EMAIL').toggleClass('animated pulse');
     }else if(...){ }...
});

我的HTML看起来像这样:

<div class="form-display">
    <div class="mc-field-group">
        <label for="mce-FNAME">First Name </label>
        <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
    </div>
    <div class="mc-field-group">
        <label for="mce-EMAIL">Email Address </label>
        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    </div>
    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

如何使用 React Router v6 获取当前 url 的最后一部分？

例如：

如果当前路径是https://localhost:4200/example/example-details，那么我想像这样检查它

const location = useLocation();

if (location.pathname === '/example-details')) {
  // do some stuff here
}

..但这总是返回完整路径。

它可以与 一起使用location.pathname.includes('/example-details')，但我很好奇是否有一种使用 React 路由器的方法，就像使用 Angular 路由器一样。

我想使用 取消我的 React 应用程序中的承诺AbortController，不幸的abort event是 未被识别，因此我无法对其做出反应。

我的设置如下所示：

WrapperComponent.tsx：在这里，我创建 AbortController 并将信号传递给calculateSomeStuff返回 Promise 的方法。我controller作为道具传递给我的 Table 组件。

export const WrapperComponent = () => {
  const controller = new AbortController();
  const signal = abortController.signal;

  // This function gets called in my useEffect
  // I'm passing signal to the method calculateSomeStuff
  const doSomeStuff = (file: any): void => {
    calculateSomeStuff(signal, file)
      .then((hash) => {
        // do some stuff
      })
      .catch((error) => {
        // throw error
      }); …

我正在尝试根据当前位置路径删除导航栏.

这是我到目前为止:

angular.module('myModule')
  .controller('MainController', function ($location, $document) {
    if ($location.path().indexOf('resetpass') > -1) {
      var navbar = angular.element($document.querySelector(".top-navbar"));
      navbar.remove();
    }
  });

通过这种方法,控制台说:

angular.js:14110 TypeError: $document.querySelector is not a function
at new <anonymous> (main.controller.js:6)
at Object.invoke (angular.js:4762)
at $controllerInit (angular.js:10518)
at nodeLinkFn (angular.js:9416)
at compositeLinkFn (angular.js:8757)
at compositeLinkFn (angular.js:8760)
at publicLinkFn (angular.js:8637)
at angular.js:1808
at Scope.$eval (angular.js:17913)
at Scope.$apply (angular.js:18013)

我究竟做错了什么？

当我使用 Angular HttpClient 发出 GET 请求时，我会得到一个可观察的数据并在 RxJS 运算符 mergeMap 中处理它。

现在，一次又一次地抛出 404，我想抓住它。最后，浏览器控制台中不应出现任何错误消息，并且应使用流的下一个值来处理管道。

有这种可能吗？我没有用catchError()来管理它。

这是我的代码的简化版本：

    ...
    this.service1.getSomeStuff().pipe(
          mergeMap((someStuff) => {
            return from(stuff);
          }),
          mergeMap((stuff) => {
            return this.service2.getMoreStuff(stuff.id); // Here I need some error handling, if 404 occurs
          }),
          mergeMap((things) => {
            return from(things).pipe(
              mergeMap((thing) => {
                if (allLocations.some(x => x.id === metaData.id)) {
                  return this.service2.getMore(thing.id, thing.type, thing.img_ref);
                }
              }),
              map((thing) => {
              ...

更新：添加了 catchError() 方法

我尝试了这种方式，但是没有检测到错误，并且下一个 mergeMap 不起作用（IDE 不再识别thing.id、thing.type、th​​ing.img_ref等参数）：

...
this.service1.getSomeStuff().pipe(
      mergeMap((someStuff) => {
        return from(stuff);
      }), …

我有一个表（ngx-datatable），我想在其中定义一个“操作”列，然后将在其中放置按钮以进行 CRUD 操作。

创建列并放置按钮有效，但我遇到的问题是，在我的触发函数中不再识别所选行及其列中的值。

这是我的模板：

<div class="col-12">
  <ngx-datatable
    #table
    class="material"
    [rowHeight]="'auto'"
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [limit]="10"
    [rows]="cars?.content"
    [selected]="selected"
    [selectionType]="'multi'">
  </ngx-datatable>
</div>

这是我的带有按钮的自定义模板：

<ng-template #buttonsTemplate let-row="row" let-value="value" let-button="column.actions">
  <button class="btn btn-transparent" (click)='onSelect($event)'><i class="rb-ic rb-ic-add-frame"></i></button>
  <button class="btn bt n-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-abort-frame"></i></button>
  <button class="btn btn-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-reset"></i></button>
  <button class="btn btn-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-agility"></i></button>
</ng-template>

我的组件（.ts 文件）的结构如下：

export class MyComponent implements OnInit, OnDestroy {
  @ViewChild('buttonsTemplate') buttonsTemplate: TemplateRef<any>;
  columns = [];

  ngOnInit() {
    this.columns = [
    {prop: 'id', name: 'Id'},
    {prop: …

我们已经将 Angular 应用从 7.2 版更新到了 8 版。更新过程到目前为止已经有效，该应用程序可以像往常一样在 Chrome、Firefox 开发者版、Safari、Opera 上以生产模式（在服务器上）本地使用。

但是在普通的火狐浏览器和 Waterfox 中，该应用程序不起作用：

• 应用程序尝试在浏览器显示状态“对 localhost 执行 tls 握手”时进行渲染，直到在某个时候出现“连接已超时”。
• 在 prod 模式下，在我部署应用程序后，至少会显示登录掩码，但应用程序的性能非常糟糕，几乎没有任何效果。

我们创建了一个包含以下内容的浏览器列表文件：

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
# npx browserslist

> 0.5%
last …

我需要一种方法来测试一个组件，其中另外两个组件是延迟加载的。

我们正在使用webpack 模块联合。因此，这里ComponentOne和ComponentTwo是在组件内部延迟加载的微前端App。因此，App这里的组件是包含两个应用程序并提供它们之间的路由的容器应用程序。

我的App.tsx看起来像这样：

import { Suspense, lazy } from 'react';
import { Route, Routes } from 'react-router-dom';

const ComponentOne = lazy(() => import('components/ComponentOne));
const ComponentTwo = lazy(() => import('components/ComponeentTwo'));

export const App = () => {
  return (
    <Suspense fallback={<div>FallbackDummy</div>}>
      <Routes>
        <Route path="/" element={<ComponentOne />} />
        <Route path="/two" element={<ComponentTwo />} />
      </Routes>
    </Suspense>
  );
};

这个应用程序组件在我的文件中使用bootstrap.tsx如下：

import { render } from 'react-dom';
import { BrowserRouter …