Javascript chuyển tham chiếu đến phần tử html

Tôi đã sử dụng ví dụ mã bảng thuộc tính được cung cấp tại đây. https. //github. com/bpmn-io/bpmn-js-examples/tree/master/properties-panel và tạo một hộp mã hóa hoạt động tại đây. https. //codesandbox. io/s/custom-elements-variables-properties-panel-fd33h?file=/src/index. js

Tuy nhiên, khi tôi chuyển mã này vào ứng dụng góc cạnh của mình, tôi đã gặp sự cố biểu hiện trong lỗi bảng điều khiển

Tôi khá chắc chắn rằng trình lập mô hình không thể khởi tạo vì nó không thể tìm thấy phần tử phía sau “ #properties-panel ” .

Nỗ lực đầu tiên của tôi để khắc phục sự cố này là thay đổi phương thức trình bao bọc AttachCanvas() của tôi.
Tôi đã bọc plugin bpmnJS trong một lớp dịch vụ góc cạnh và phương thức attachmentCanvas() trông giống như.

public attachmentCanvas(htmlElement. ElementRef) {
cái này. bpmnJS. AttachTo(htmlElement);
}

vì vậy tôi chỉ thay đổi nó thành

public attachmentCanvas(htmlElement. ElementRef, propertiesPanelParentElement. ElementRef) {
cái này. propertiesPanelParentElement = propertiesPanelParentElement;
this. bpmnJS. AttachTo(htmlElement);
}

và sau đó thay đổi

cái này. bpmnJS = new Modeler({
additionalModules. [bpmnCustomControls, propertiesPanelModule, propertiesProviderModule],
moddleExtensions. {
camunda. camundaModdleDescriptor,
},
propertiesPanel. {
cha mẹ. ' #properties-panel ',
},
});

đến

cái này. bpmnJS = new Modeler({
additionalModules. [bpmnCustomControls, propertiesPanelModule, propertiesProviderModule],
moddleExtensions. {
camunda. camundaModdleDescriptor,
},
propertiesPanel. {
cha mẹ. cái này. propertiesPanelParentElement,
},
});

và bắt đầu chuyển một phần tửRef cho bảng thuộc tính giống như cách tôi chuyển nó cho phần tử canvas. Điều này đã ngăn lỗi bảng điều khiển mà tôi đã trình bày ở trên, nhưng bảng thuộc tính vẫn chưa được tải

Vì giải pháp của tôi chỉ là phỏng đoán, bạn có thể đưa ra cách chuyển tham chiếu phần tử hoạt động tích cực không?

Trong bài đăng đầu tiên, tôi cũng có một hộp mã không góc cạnh nơi bảng thuộc tính hoạt động - nó dựa trên bpmn. ví dụ mã io cho bảng thuộc tính. Nếu bạn có thể làm cho ví dụ này hoạt động trong hộp chứa mã góc, thì sẽ rất thú vị khi nghiên cứu xem có gì khác biệt trong hộp chứa mã góc của tôi

Bản thân việc nhập trình tạo mô hình hoạt động, mặc dù Codesandbox nhấn mạnh nó. Như bạn có thể thấy tôi đang sử dụng cùng một địa chỉ cho bảng thuộc tính trong hộp mã hóa góc như địa chỉ trong hộp mã hóa không góc. Tôi không đoán được tại sao thuộc tínhPanelModule và thuộc tínhProviderModule không được xác định

Lời khuyên cuối cùng của Niklas, về việc cung cấp một giá trị cho propertiesPanel với attachTo() đã mang lại cho tôi kết quả tốt trong mã “dự án thực tế” của tôi - bây giờ bảng điều khiển hiển thị liên tục

Làm cách nào tôi có thể làm cho nó chỉ hiển thị khi một phần tử sơ đồ được chọn, đó là cách nó hoạt động trong hộp và mã không góc cạnh?

– Thật tệ, tôi nghĩ đó là cách nó hoạt động theo mặc định, nhưng tôi thấy bảng điều khiển có nghĩa là luôn hiển thị miễn là có sơ đồ được tải

Nếu một hàm được gọi với các đối số bị thiếu (ít hơn so với khai báo), các giá trị bị thiếu được đặt thành undefined

Đôi khi điều này có thể chấp nhận được, nhưng đôi khi tốt hơn là gán giá trị mặc định cho tham số

Giá trị tham số mặc định

ES6 cho phép các tham số chức năng có giá trị mặc định

Ví dụ

Nếu y không được thông qua hoặc không xác định, thì y = 10

function myFunction(x, y = 10) {
  return x + y;
}
myFunction(

Thông số phần còn lại chức năng

Tham số còn lại (. ) cho phép một hàm coi số lượng đối số không xác định là một mảng

Ví dụ

hàm tổng(. args) {
  let sum = 0;
  for (let args of args) sum += arg;
  return sum;
}

đặt x = tổng(4, 9, 16, 25, 29, 100, 66, 77);

Đối tượng đối số

Các hàm JavaScript có một đối tượng tích hợp được gọi là đối tượng đối số

Đối tượng đối số chứa một mảng các đối số được sử dụng khi hàm được gọi (gọi)

Bằng cách này, bạn có thể chỉ cần sử dụng một hàm để tìm (ví dụ) giá trị cao nhất trong danh sách các số

Ví dụ

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
  let max = -Infinity;
  for (let i = 0; i < đối số. chiều dài;
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
}

Hoặc tạo một hàm để tính tổng tất cả các giá trị đầu vào

Ví dụ

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
  let sum = 0;
  for (let i = 0; i < đối số. chiều dài;
    sum += arguments[i];
  }
  return sum;
}

Nếu một hàm được gọi với quá nhiều đối số (nhiều hơn so với khai báo), những đối số này có thể được truy cập bằng cách sử dụng đối tượng đối số

Các đối số được truyền theo giá trị

Tham số, trong lời gọi hàm, là đối số của hàm

Các đối số JavaScript được truyền theo giá trị. Hàm chỉ biết các giá trị, không biết vị trí của đối số

Làm cách nào để chuyển giá trị sang HTML từ JavaScript?

Bạn có thể chuyển qua tham chiếu trong JavaScript không?

Làm cách nào để tham chiếu một phần tử trong JavaScript?

Làm cách nào để chuyển một chuỗi theo tham chiếu trong JavaScript?